Question

我有下表有一个中央图像保持单元，它跨越两行：

<table width="100%" style="text-align:center">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td rowspan="2"><img src="http://www.skrenta.com/images/stackoverflow.jpg"/></td>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
  <tr>
    <td>Cell 5</td>
    <td>Cell 6</td>
    <td>Cell 7</td>
    <td>Cell 8</td>
  </tr>
</table>

我希望表格和没有图像的所有单元格填充可用的最大空间，但我希望图像单元格宽度调整为仅占用图像所需的空间。我认为这是你使用聪明的margin-values来实现效果的场景之一，但我无法弄清楚如何去做。

http://jsfiddle.net/7eX4S/

TIA

Answer 1

您可以简单地指定一个太小值的内联宽度属性（例如width="1px"），容器将调整大小以适合图像。

<td rowspan="2" width="1px"><img src="http://www.skrenta.com/images/stackoverflow.jpg"/></td>

http://jsfiddle.net/KRL9v/

Answer 2

您可以为其他四列使用25%的宽度，并使用width: auto;作为中心列：

td {
    width: 25%; }

td[rowspan] {
    width: auto; }

或者使用CSS3 :not伪类：

td:not([rowspan]) {
    width: 25%; }

<强> WORKING FIDDLE

表宽100％但不想拉伸中央细胞

2 个答案: