如何制作寬度固定但高度固定的桌子？

Question

我在制作一個可以重現我的問題的jsfiddle時遇到麻煩，但是我有一個演示了我正在處理的基本布局的jsfiddle。

http://jsfiddle.net/LurUM/4/

<div style="width: 73%; float: left;">
    <!-- table here -->
</div>
<div style="width: 23%; float: right;">
    <!-- sidebar here -->
</div>

我在這樣的頁面上有一張桌子，但是它的寬度不是正確的，它要寬得多，會與右側欄碰撞並越過它。 我嘗試將表格的寬度設置為100％，然后設置固定的表格布局。 寬度的行為完全符合我的期望，但是表格單元格中的某些文本溢出了，並與其他列中的文本發生了沖突。 我想要的是單元格變高並且文本換行而不是溢出，但是如果我理解正確的話，固定的布局可以防止這種情況。

我是否正確了解情況？ 有什么解決方案？ 桌子為什么要有這么多的額外寬度呢？

Answer 1

試試這個代碼：

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
        </td>
    </tr>
</table>

word-wrap: break-word屬性會將長單詞包裝到下一行並調整單詞，以使它們不會打斷中間單詞。 與table-layout: fixed;一起使用時table-layout: fixed; 它將防止表邊界溢出。

Answer 2

如果還有其他內容必須與表保持一致，則請保持div不變，否則我建議為表使用ID名稱，並將所有樣式移至適用的樣式表。 然后，您的表將直接從CSS獲取其寬度設置，而不是溢出父容器。 我還建議您僅使用一個浮點數，該浮點數應位於頁面的最高位置。 這將使html保持清潔，即更易於閱讀和調試。

<div class="leftSide">
   <table>html</table>
   <p>other stuff that must be aligned with table</p>
</div>
<table id="rightTable">table that will float around other content</table>
<div>other content will continue to float until space is used up</div>

CSS
.leftSide {float: left; width: 40%; margin-right 20px; }
.leftSide table {width: 90%; }
.leftSide p {other css}

html更容易以這種方式閱讀，並且使用特異性來向下鑽取div中的元素，該表將是其父div寬度的90％，並且不會再溢出容器（除非您放置一些巨大的圖片在那里）。 可以添加其他CSS，包括其他答案中提到的自動換行和斷詞。 w3對於CSS特殊性和其他繼承問題（例如您所面臨的問題http://www.w3.org/TR/selectors/