Question

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

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

左列高度不固定。右边的行号也没有固定。所有我想要的是右侧的行将同样按左列高度拉伸，并将整个间隙填充到底部，就像我的第二个例子一样。

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;
}

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

请注意！ rowspan=0可能仅适用于Firefox和Opera。至少它不适用于Safari。如果您事先不知道行数或者无法使用php或JavaScript动态确定行数，则可能需要在左侧添加图片，在右侧添加两个列表。

另见答案：Table with table-layout: fixed; and how to make one column wider

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

2 个答案: