HTML表格单元格的左边一列高拉伸

Question

所以，我有表是这样的：http://img607.imageshack.us/img607/5295/1stv.jpg

但我想这样做一个：http://img684.imageshack.us/img684/3500/2ndjn.jpg

左边一栏的高度是不固定的。右边的行数不固定两种。所有我想要的是在右边行会被留柱高度同样streched，充满了差距一路至底部，就像我的第二个例子。

Answer 1

您可以使用table-layout:fixed试试吧

<table style='table-layout:fixed;'>
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
</table>

然后设置你的行和列尽可能一些宽度和高度

Answer 2

这可能会实现：

HTML

<table>
  <tr>
    <th rowspan="0">pic</th>
      <td>text</td>
      <td>text</td>
  </tr>
    <tr>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
    </tr>
</table>

CSS

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

td, th{
  border: 1px solid #000;
  width: auto;
}

td+th {
  width: auto;
}

th {
  height:300px;
}

只要改变一个th的高度在CSS或添加不同大小的图片到细胞。您也可以可变数量的行添加到HTML。

注意！ rowspan=0可能仅与Firefox和Opera的工作。至少它不会在Safari工作。您可能要到左图两页的表格添加到它的权利，如果你不知道的行数事先或不能使用php或JavaScript动态地确定它。

也看到这个答案：Table with table-layout: fixed; and how to make one column wider