Html 表格宽度100%，带溢出滚动条

我的网页上的表格设置为

宽度：100%

。如果需要，这会将表格拉伸到我的页面的整个宽度，如果页面太窄，则会导致表格的内容换行。桌子上的所有东西都放在一个格子里

不幸的是，如果表格中的字数过长，则会出现一些问题，从而阻止td变得更窄。当这种情况发生时，页面开始开发一个水平滚动条来容纳表格，在页面上放置其他元素，如段落，保持原始页面的宽度

我试图将表格设置为溢出：滚动，以防止网页变宽，将其限制为仅限于表格，但这并没有解决问题。我甚至尝试了

overflow:hidden

，看看它是否会响应，但我无法让它工作

如果我将表设置为

display:block

，则溢出可能会起作用，但我无法使表行和表数据单元在整个表中伸展并保持其类似于表的外观

是否可以始终使表格的宽度为页面的100%，并且在表格超过此宽度时使用溢出滚动

我在下面添加了这个示例。它工作得很好，除非页面变得很窄，比如本例中的150px左右。表格单元格太窄，无法再包装。我想让表格溢出，但整个页面都溢出了

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus nulla et lorem imperdiet, eu malesuada enim viverra. Fusce sit amet nisi sed ante semper porta non in velit. Aenean euismod finibus nibh id mollis. Duis finibus, urna eu gravida posuere, nisl tortor condimentum dui, sed suscipit ante lacus et augue. Vestibulum ut leo hendrerit, convallis lectus quis, mollis purus. Mauris vitae libero aliquam, porttitor nisi vitae, pellentesque odio. Mauris vestibulum lacinia sem. Aenean sit amet nulla ipsum. Mauris pellentesque dui feugiat odio feugiat, vel egestas eros pellentesque. Cras porttitor metus eu porttitor lacinia.</p>
<table style="width:100%;overflow:scroll;background:#555">
<tr><td>column one</td><td>column two</td><td>column three</td></tr>
</table>

Lorem ipsum Door sit amet，是一位杰出的领导者。这是一种不健康的饮食习惯，是一种健康的饮食习惯。他坐在船底的门前。埃尼安·尤伊斯莫德·菲尼布斯·尼伯·莫利斯。酒后驾车、欧盟孕妇酒后驾车、nisl tortor调味品酒后驾车、酒后驾车和酒后驾车。利奥·亨德雷特（leo hendrerit）、莱克斯·奎斯（convallis lectus quis）、莫利斯·普勒斯（mollis purus）前庭。莫里斯·维塔·利伯罗·阿利奎姆、波特提托·尼西·维塔、佩伦茨克·奥迪奥。毛里斯前庭拉齐尼亚扫描电镜。我不知道该怎么做。莫里斯·佩伦茨克对决是一场世仇，奥迪奥·佩伦茨克是一场世仇。我是梅特斯港，我是拉齐尼亚港

第一栏第二栏第三栏

这样行吗？如果表的宽度大于

标题
标题
标题
标题
标题
标题
身体
身体
身体
身体
身体
身体

您不能仅通过更改表的

显示来完成此操作，但有几种方法可以实现此目的

1。添加“滚动”容器div
您可以在容器div中设置标准表，并为其指定
overflow:auto，因此它将具有滚动条

table          { width: 100%; }
.scrollwrapper { overflow: auto; }

这意味着即使表格本身不够宽，表格也至少会拉伸到宽度的100%，如果内容使其宽度超过100%，div将获得一个滚动条

工作示例：


表格{
宽度：100%；
边框：1px纯蓝色；
}
.scrollwrapper{
溢出：自动；
}
运输署{
边框：1px实心#aaa；
}
滚动包装器-宽表
这不是任何长单词都不会缠绕Table Cell
这不是任何长单词都不会缠绕Table Cell
这不是任何长单词都不会缠绕Table Cell
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种不健康的饮食习惯，是一种健康的饮食习惯。
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种不健康的饮食习惯，是一种健康的饮食习惯。
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种不健康的饮食习惯，是一种健康的饮食习惯。
滚动包装器-窄表
第1栏
第2栏
第3栏
短文
短文
短文
请在中包含一个您遇到问题的代码示例，以便我们可以看到正在发生的情况并能够提供帮助。将带有省略号样式的元素放在TDP中可能是您正在寻找的，或者您尝试的
溢出：自动
属性ID？@FluffyKitten示例添加。elad我并不是想切断任何文本，只是想让表溢出。Itay和Hisham Bawa，不幸的是，它没有解决问题。不确定为什么
display:block
对你不起作用，虽然我不确定是谁否决了你，但不是我，尽管这个解决方案不起作用。它很好地溢出，但是如果它比表宽，它就不会扩展到父div的全宽，就像普通表设置为width:100%一样。这很完美。非常感谢你。你的解释真的很有帮助。