0

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

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

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

4

2 回答 2

0

这可能有效：

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 中更改 a 的高度或向单元格添加不同大小的图片。您还可以向 HTML 添加可变数量的行。

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

另请参阅此答案：Table with table-layout: fixed; 以及如何使一列更宽

于 2012-09-18T11:58:22.620 回答
0

你可以尝试使用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>

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

于 2012-09-18T06:45:01.987 回答