表格宽度100％，但不希望以拉伸中央细胞

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> 

我想要的表和不具有所有细胞图像以填充可用空间的最大量，但我希望图像单元格宽度可以调整为仅占用图像所需的空间。我认为这是您使用巧妙的边距 - 值来实现效果的场景之一，但我无法完全弄清楚如何去做。

http://jsfiddle.net/7eX4S/

TIA

Answer 1

你可以使用的25%宽度为其他四列，并使用width: auto;为中央纵队：

td { 
    width: 25%; } 

td[rowspan] { 
    width: auto; } 

或者使用CSS3 :not伪类来代替：

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

WORKING FIDDLE

Answer 2

可以简单地分配一个太小的值（例如width="1px"）的一个内联width属性和容器将尺寸可达以适应图像。

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

http://jsfiddle.net/KRL9v/