如何使列的寬度適合HTML表格中的內容？

Question

我下表在我的HTML：

<div style="max-width:700px;"> 
    <table border="1"> 
     <tr><td colSpan="2">this is a loooooooooooooooong text</td></tr> 
     <tr><td width="1px">a:</td><td >b</td></tr> 
     <tr><td width="1px">c:</td><td >d</td></tr> 
    </table> 
<div> 

我想第二排和第三排只適合內容長度在第一列的寬度（這就是爲什麼我把width="1px"那裏）。同時，我希望表寬度恰好適合表中最長內容的長度（這是第一行），而不是跨越其邊界div的最大寬度。

它適用於Firefox，如下所示。

然而，在IE 9它不象預期的那樣工作所示。

我試着用width="1%"更換width="1px"。但是，表格寬度將跨越父div的最大寬度。

有誰知道如何解決它在IE瀏覽器？

Answer 1

我剛剛在我的IE9中進行了測試，並將寬度設置爲1px。但是它顯示爲您在兼容模式以上提供的以上。你有沒有聲明你的文檔類型和所有其他有趣的東西？

這可能是因爲您使用的是舊方法來顯示錶格。您可以嘗試使用CSS中的邊框等對錶格進行造型 - 例如：

table, td, tr, th{ 
    border:1px solid #f0f; 
} 

.onepx{ 
    width:1px; 
} 



<div style="max-width:700px;"> 
    <table> 
    <tr><td colspan="2">this is a loooooooooooooooong text</td></tr> 
    <tr><td class="onepx">a:</td><td>b</td></tr> 
    <tr><td class="onepx">c:</td><td>d</td></tr> 
    </table> 
<div> 

等等 - 我相信您會明白。這可能會阻止它在兼容性視圖中自動顯示（如果是問題）。

最後，因爲IE9太愚蠢了，您將不得不關閉兼容性視圖（如果它在頁面上啓用），因爲域中的所有頁面都將在兼容性視圖中查看。

Answer 2

您提到您已嘗試將其設置爲1％，您是否將其他設置爲99％？

<tr><td width="1%">a:</td><td width="99%">b</td></tr> 
<tr><td width="1%">c:</td><td width="99%">d</td></tr>