Question

我无法制作一个可以重现我的问题的jsfiddle，但我有一个能够演示我正在处理的基本布局。

<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;一起使用时，它将防止表格边界溢出。

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/

如何制作具有固定宽度但不是固定高度的桌子？

2 个答案: