表格寬度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/