1

我正在使用 twitter 引导程序，但我认为这对我正在做的事情没有影响。

基本上我有一张桌子。我正在测试填充表格的可枚举的长度以及我想“填充”到容器全长的最后一行，即如果它少于 10 行，我想添加一个行跨度为的行10 - item.count ......但是，它只是呈现一个空白行......这是故意的还是我做错了什么？这是一个小提琴：

http://jsfiddle.net/L46FX/37/

这是一张桌子......任何帮助将不胜感激......

<table class="table table-bordered">
   <thead>
      <tr>
         <th>#</th>
         <th>First Name</th>
         <th>Last Name</th>
         <th>Username</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td rowspan="2">1</td>
         <td>Mark</td>
         <td>Otto</td>
         <td>@mdo</td>
      </tr>
      <tr>
         <td>Mark</td>
         <td>Otto</td>
         <td>@TwBootstrap</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Jacob</td>
         <td>Thornton</td>
         <td>@fat</td>
      </tr>
      <tr>
         <td>3</td>
         <td colspan="2">Larry the Bird</td>
         <td>@twitter</td>
      </tr>
      <tr>
         <td colspan="4" rowspan="10">
           this should be a row that is 10 rows long...
        </td>
      </tr>
   </tbody>
</table>

编辑：

正如建议的那样，javascript似乎是答案......这就是我想出的，它测试了行高，因为我的表格在一个选项卡中，所以高度属性返回为0，因为它们当前不是在活动标签中..

 $('.stretch').each(function () {
            var rows = $(this).rowCount();
            if (rows < 10) {
                var lr = $(this).children('tbody').children('tr:last');
                var bg = lr.children('td').first().css('background-color');
                var ht = lr.css('line-height').replace('px', '') * (10 - rows);
                var row = '<td colspan="' + lr.children('td').length + '"></td>';
                $(this).children('tbody').append('<tr style="height: ' + ht + 'px; background-color: ' + bg + '">' + row + '</tr>');
            }
        });

还要澄清我在做什么...当表格呈现 1 行时，我真的很讨厌它，它看起来很丑:) 我倾向于将表格的操作项放在页脚中，所以这试图用一个巨人填充容器行并将 tfoot 锚定到父级的底部或非常靠近它....

4

3 回答 3

0

我不明白真正的问题，但是您希望最后一个表格单元格<td>跨越 10 行，而不是您错误地使用它。

这不是一个有效的 html。如果您放弃rowspan最后一行表格单元格，则没有空间可以跨越表格单元格。

ROWSPAN：此属性指定当前单元格跨越的行数。此属性的默认值为一（“1”）。值零 ("0") 表示该单元格跨越从当前行到定义该单元格的表格部分（THEAD、TBODY 或 TFOOT）的最后一行的所有行。

读表规范

看到这个

于 2013-10-29T14:05:52.410 回答
0

不确定我是否完全理解...但这是我的想法...

  1. rowspan在您的代码中使用不正确。如果旁边有行，它只会增加heighta的 。请参阅此示例：http ://reference.sitepoint.com/html/th/rowspantrcolumn

  2. 如果要将最后一行扩展到其大小的 10 倍，可以使用如下脚本：

    var a = $( "tr" ).last().height();
$( "tr" ).last().css('height',a * 10 + 'px');

    这是演示：http: //jsfiddle.net/L46FX/38/

于 2013-10-29T13:56:26.993 回答
0

你的意思是 CELL 应该是 10 COLUMNS 长。您正在混淆“行”和“列”（col）以及“行”和“单元格”的含义。

<tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>    
<tr>
    <td colspan="10">this should be a CELL that is 10 COLUMNS long...</td>
</tr>

当然，您的表首先需要有 10 列，而您的则不需要。

于 2013-10-29T05:50:50.027 回答