标签: html-table

如何强迫min-height和vertical-align:middle为td元素或它的内在元素工作？

我有一张桌子,第一排就好

<tr>
<th>1</th>
<th>2</th>
</tr>

我把黑色背景放到"th".现在1和2单元格之间有某种边界/分隔它们......我看了一下源代码,我想我找到了一些东西:

border-collapse: separate;
border-spacing: 2px;

这个CSS代码在源代码中列为"用户代理样式表",我无法启用/禁用它来测试这是否是问题,但我尝试添加了相同的代码,但是带有"none"和"0"参数但是它既没有帮助......

有人可以帮助并指导我来自哪里的边界？

我试图使用jQuery动态创建如下的HTML表格:

<table id='providersFormElementsTable'>
    <tr>
        <td>Nickname</td>
        <td><input type="text" id="nickname" name="nickname"></td>
    </tr>
    <tr>
        <td>CA Number</td>
        <td><input type="text" id="account" name="account"></td>
    </tr>
</table>

这是我的实际表格:

<table border="0" cellpadding="0" width="100%" id='providersFormElementsTable'> </table>

这是将创建tr和td元素采取的方法id和labelText:

function createFormElement(id, labelText) {
    // create a new textInputBox button using supplied parameters
    var textInputBox = $('<input />').attr({
        type: "text", id: id, name: id
    });
    // create a new textInputBox using supplied parameters
    var inputTypeLable = $('<label />').append(textInputBox).append(labelText);

    // append the new radio button and …

你可以在顶部/底部而不是所有(T,B,L,R)上使用cellpadding或间距吗？

有没有一种有效的方法将表的行划分为多个部分,标签标识该部分？

例如,类似下面的代码,但在每个TBODY的开头有一个标题或标题(看起来像标题/标题只允许在表的顶部)

<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH>  <TH>Manager</TH> </TR>
</THEAD>

<TBODY>
<TR> <TD>Monday</TD>    <TD>09/11/2000</TD> <TD>Kelsey</TD>  </TR>
<TR> <TD>Tuesday</TD>   <TD>09/12/2000</TD> <TD>Lindsey</TD> </TR>
<TR> <TD>Wednesday</TD> <TD>09/13/2000</TD> <TD>Randy</TD>   </TR>
<TR> <TD>Thursday</TD>  <TD>09/14/2000</TD> <TD>Susan</TD>   </TR>
<TR> <TD>Friday</TD>    <TD>09/15/2000</TD> <TD>Randy</TD>   </TR>
<TR> <TD>Saturday</TD>  <TD>09/16/2000</TD> <TD>Lindsey</TD> </TR>
<TR> <TD>Sunday</TD>    <TD>09/17/2000</TD> <TD>Susan</TD>   </TR>
</TBODY>

<TBODY>
<TR> <TD>Monday</TD>    <TD>09/18/2000</TD> <TD>Melody</TD>     </TR>
<TR> <TD>Tuesday</TD>   <TD>09/19/2000</TD> <TD>Christiane</TD> </TR>
<TR> <TD>Wednesday</TD> <TD>09/20/2000</TD> <TD>Symphony</TD>   </TR>
<TR> <TD>Thursday</TD>  <TD>09/21/2000</TD> <TD>Starflower</TD> </TR>
<TR> <TD>Friday</TD>    <TD>09/22/2000</TD> <TD>Miko</TD>       </TR>
<TR> <TD>Saturday</TD>  <TD>09/23/2000</TD> <TD>Cleo</TD>       </TR>
<TR> <TD>Sunday</TD>    <TD>09/24/2000</TD> …

我想要在表格中重新排列行的功能(使用拖放操作排序行). 行排列的索引也应该在模型中改变.

我怎样才能做类似的事情:http://jsfiddle.net/tzYbU/1162/ 使用Angular Directive？

我正在生成表格:

<table id="sort" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th class="header-color-green"></th>
      <th ng-repeat="titles in Rules.Titles">{{titles.title}}</th>
    </tr>
  </thead>
  <tbody ng-repeat="rule in Rules.data">
    <tr>
      <td class="center"><span>{{rule.ruleSeq}}</span></td>
      <td ng-repeat="data in rule.ruleData">{{statusArr[data.value]}}</td>
    </tr>
  </tbody>
</table>

Google Chrome的开发者工具中出现以下错误:

未捕获的TypeError:无法读取未定义的属性"className"

抛出错误的代码是:

var oTable = $('#resultstable').dataTable({
                            "bAutoWidth" : true,
                            "iDisplayLength" : 10,
                            "bFilter" : false,
                            "bLengthChange" : false
                        });

resultstable是html中表的id:

<table cellpadding="0" cellspacing="0" border="0" id="resultstable"
                    name="resultstable" class="display datatable">

奇怪的是,在table标签之后有一个if语句.该表运行完全正常,当程序被发送到else if{}部分时CSS正确显示,但它抛出上述错误,当它在该if{}部分时没有应用CSS .

请帮忙!

有一个第三方内容网站,我必须通过动态内容"嵌入",我现在不知道Ajax或Jquery所以我想知道是否可以将表格单元格转换为新行,基本上创建一个新行.

嵌入最终得到:

<table>
<tr>
<td></td>
<td></td>
</tr>
</table>

表中没有任何类或ID,但它是页面上唯一的表,它有太多的内容可以放在一行,这是一个移动网站,所以我必须使整个页面320像素宽.

是否可以单独使用CSS？

我无法插入新的HTML,内容是从我们无权访问的安全服务器动态创建的,但我们使用API​​密钥来访问.. mediaqueries工作.

我目前正在尝试尝试以下方面的内容:

td {clear:both;}

所以我正在使用Javascript和jQuery创建一个表,我想要它,这样当你点击表格第一行的td时,那个列中其余的td就会下拉.让我试着通过展示我的代码来解释它.这是我的Javascript:

function createTr (heights) { //heights is just an array of words
    for (var h=0; h<heights.length; h++) { 
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights.length-3; i++) { 
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     html: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table (#newTable), which is written in the html
    }
}

这基本上创建了td,每个td类似于这种格式

<td class="rowh columni">

我想要它,以便除了.row0中的td之外都隐藏所有td,如果你点击.row0 .columni中的td,那么.columni中的所有td都会出现.参数'heights'是一个数组,例如,它可以是

var heights = [['headerOne', 'headerTwo'], ['someTd', 'anotherTd'],];

并且它将使用这些单词创建一个表,headerOne和headerTwo将在第一行中,someTd和anotherTd将在第二行中.

现在,当我尝试添加这样的点击功能时

function animation() {
    $('td').click( …

我正在基于表格布局(没有div)的网站上工作.现在需求更改并且必须重新创建以使其看起来响应,并且为了响应我们选择bootstrap作为选项.

现在,我如何将表格布局转换为引导网格布局,以便1.看起来不会改变,2.也有响应.

表格布局在网站上太复杂了.那里有很多筑巢.例如:

<table border="0" width='100%' bgcolor='#ff00ff'>
<tr style='padding-bottom:1em;'>
<td>
    <table border="0">
        <tr valign='bottom'>
            <td width='50'>&nbsp;</td>
            <td>
                <img border="0" src="#" width="100" height="300">
            </td>
            <td width='25'>&nbsp;</td>
            <td>
                <span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
            </td>
        </tr>
    </table>
</td>
<td align='right'>
    <table border="0" cellspacing="0">
        <tr>
            <td align='center' colspan='3'>
                <span>Another tesing text</span>
                <span style='color:#FFFFCC;'> - </span>
                <span style='font-size:11px;color:#fffff;'>Random text</span>
            </td>
        </tr>
    </table>
</td>
</tr>

例如,如何使用bootstrap row,col-*-*grid-layout 转换上面的代码.

相信我,我尝试了很多来转换它,但有时看起来有变化或有些时候根本不起作用.

关于如何将表基本布局转换为引导程序的一般建议也是受欢迎的.