HTML表格单元格按左列高度拉伸答案

【问题标题】：HTML table cells stretching by left column heightHTML表格单元格按左列高度拉伸
【发布时间】：2012-09-10 09:30:56
【问题描述】：

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

但我想做这样的事情： http://img684.imageshack.us/img684/3500/2ndjn.jpg

左列高度不固定。右边的行号也不固定。我只希望右边的行同样被左列高度拉伸，并一直填充到底部的整个间隙，就像我的第二个例子一样。

【问题讨论】：

我们可以在这里使用 javascript 或 css 吗？还是只有html？

标签： html html-table

【解决方案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>

然后在列和行中尽可能设置一些宽度和高度

【讨论】：

【解决方案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;
}

只需在 CSS 中更改 th 的高度或向单元格添加不同大小的图片。您还可以向 HTML 添加可变数量的行。

注意！ rowspan=0 可能只适用于 Firefox 和 Opera。至少它不适用于 Safari。如果您事先不知道行数或无法使用php 或JavaScript 动态确定行数，您可能希望在左侧添加一张图片，在其右侧添加两列表格。

另请参阅此答案：Table with table-layout: fixed; and how to make one column wider

【讨论】：