Question

我正在使用Twitter bootstrap，但我认为这对我正在做的事情有所影响。

基本上我有一张桌子。我正在测试填充表的可枚举的长度以及我想要“填充”到容器的整个长度的最后一行，即如果它少于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似乎就是答案......这就是我想出来的，它测试了行高，因为我的表在一个标签中，所以height属性返回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>');
            }
        });

另外要澄清我在做什么......当桌子呈现一行时，我真的讨厌它，它看起来很丑陋:)我倾向于在页脚中放置表格的动作项目，所以这会尝试填充容器有一个巨大的行并将脚踩到父母的底部或非常靠近它......

Answer 1

你的意思是CELL应该是10 COLUMNS long 。你混淆了“行”和“列”（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列而你的表不需要。

Answer 2

不确定我完全明白......但这就是我的想法......

rowspan在您的代码中使用不正确。如果height旁边有行，则只会增加tr的{{1}}。请参阅此示例：http://reference.sitepoint.com/html/th/rowspan
如果要将最后一行扩展到其大小的10倍，可以按如下方式使用某些脚本：
```
column
```
以下是演示：http://jsfiddle.net/L46FX/38/

Answer 3

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

这不是有效的HTML。如果将rowspan放入最后一行表格单元格中，则没有空间跨越表格单元格。

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

Read table specification

See this

添加最后一行表rowspan属性不起作用

3 个答案: