根據其TD單元更改TABLE的寬度

我正在尋找一種通過指定其TD的寬度來指定表格寬度的方法。根據其TD單元更改TABLE的寬度

在以下情況下（try it live on jsfiddle），你可以看到我指定的每個TD的寬度100px的，我有望獲得300像素表（和DIV水平滾動條），但在實踐中的瀏覽器給他們63px的寬度（這是表格的寬度除以3）

wrong width

有沒有什麼辦法讓陣確定表格的寬度和輪沒有其他方式？到目前爲止，我已經爲TD和TABLE嘗試了不同的表格佈局，顯示和溢出值，但沒有取得任何成功。

的HTML：

<div> 
    200px 
    <table> 
     <tr> 
      <td>100px</td> 
      <td>100px</td> 
      <td>100px</td> 
     </tr> 
    </table> 
</div>

和最小的CSS：

div { 
    width: 200px; 
    height: 300px; 
    border: solid 1px red; 

    overflow-x: scroll; 
} 

td { 
    width:100px; 
    border: solid 1px #000; 
} 

table { 
    border-collapse: collapse; 
}

來源

2013-08-23 el_shayan

「我正在尋找一種通過指定其TD的寬度來指定表格寬度的方法。」請問爲什麼？也許還有另一個解決你的問題的方法。 – user1477388

該表是動態生成的。只有細胞大小是已知的。表必須超出其容器邊界，我們應該看到一個滾動條。 –

簡單的解決方案似乎是設置min-width代替width爲陣。

來源

2013-08-23 16:22:04

這工作。只要確保在td內沒有任何寬度100％的項目（如div），或者單元展開爲表格的整個寬度。 – meub

@meub：不會設置'min-width'和'max-width'解決這個問題嗎？ – user1618143

一個簡單的解決方案是讓TD的內容是100像素寬。

<div> 
    200px 
    <table> 
     <tr> 
      <td><div class="content">100px</div></td> 
      <td><div class="content">100px</div></td> 
      <td><div class="content">100px</div></td> 
     </tr> 
    </table> 
</div> 

.content { 
    width: 100px; 
}

來源

2013-08-23 16:19:52 meub

我正準備發佈。 – user1618143

可能工作，但我發現另一個純粹基於CSS的解決方案。謝謝你。 –

如果您正在動態生成表格，那麼您可以動態設置表格的寬度。只需計算所需的寬度，並將style="width:300px;"（或其他）添加到<table>標籤。

不是說人們在這裏發佈的其他選項當然也不完全有效。

來源

2013-08-23 16:38:27 user1618143

根據其TD單元更改TABLE的寬度

回答

相關問題