如何使html表故意超過其容器的寬度？

Question

Demo

我想做一個表，其中包含一個水平滾動條，任何單獨的行的寬度可以設置爲任何我想要的。我已經嘗試了兩種不同的方法來實現這一點，他們每個給我的問題：

如果我給我的表分配一個寬度大於其包含div並應用overflow-x: scroll，該表超過其容器的寬度。但是，我無法控制我的細胞的寬度。設置td{width:'x'px;}不會執行任何操作。

如果改爲將table-layout:fixed應用於表格，我現在可以調整各行的寬度，但不能超過表格容器的寬度。

我該如何得到兩全其美？我需要表格超過容器的寬度才能獲得滾動條，同時還可以將不同行的寬度設置爲任何值。

Answer 1

HTML表格和表格單元格按照設計方式工作 - 單元格將始終限制在表格的寬度內。如果你想將它們大小像你一樣正常inline-block的元素，您可以：

1. 使用<div class="table">和<div class="cell">來標記和樣式表。

OR

更改顯示在CSS模式。 {display: block}表格，{display: inline-block}表示單元格。你可能還需要與像<tr>，<th>，<thead>，<tbody>其他元素的顯示模式撥弄...

稍微注意一下：萬一你正在使用表作爲佈局你的頁面的手段內容，請停止並強烈重新考慮更改您的方法。表格是用於佈局的令人討厭的柺杖，應該只用於顯示實際的表格數據。

Answer 2

爲要超過其容器寬度的元素設置position: absolute;。但也可以將position: relative;設置爲其父項，以便您可以調整位置。