Html 如何使用可滚动的表体应用100%宽度

我正在尝试实现可滚动的表体。我能够成功地做到这一点，但现在我面临着宽度100%的问题

请检查一下这个密码

单位
接触
国家
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利

试试这段代码。我认为这对你来说是最好的

表格{
宽度：100%；
}
t车身{
宽度：100%！重要；
最大高度：50px；
显示：块；
溢出y：自动；
}
泰德{
最小宽度：100%！重要；
}
thead tr{
宽度：计算（100%-17px）！重要；
显示：内联块；
}
tbody tr{
宽度：100%！重要；
显示：内联块；
}
th，td{
宽度：30%！重要；
显示：内联块；
文本对齐：左对齐；
}

单位
接触
国家
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利

如果要使表格可滚动并设置其高度，只需使用表格本身即可

删除表格上的所有样式，并添加以下css：

table {
  width: 100%;
  max-height: 80px;
  display: block;
  overflow-y: scroll;
  position: relative;
}

看这把小提琴：

---

由于您使用的是3列标题（100%/3），因此需要清除最初随表提供的一些样式，并将宽度设置为33%

见下文：

表格{
宽度：100%；
边界塌陷：塌陷；
边界间距：0；
边框：2件纯黑；
}
thead，tbody，tr，td，th{display:block；}
tr：之后{
内容：''；
显示：块；
可见性：隐藏；
明确：两者皆有；
}
thead th{
高度：30px；
线高：30px；
文本对齐：左对齐；
}
t车身{
高度：100px；
溢出y：自动；
}
泰德{
/*退路*/
宽度：97%；
/*负滚动条宽度*/
宽度：计算（100%-17px）；
}
tbody{边框顶部：2px纯黑；}
tbody td，thead th{
宽度：33%；
浮动：左；
}
tbody td:最后一个孩子，thead th:最后一个孩子{
边界权：无；
}

单位
接触
国家
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利

有一个更简单的CSS解决方案。与其担心元素的宽度和滚动，不如用container div包装表格，并对

th

元素使用style

position:sticky

。下面的示例片段-

.table容器{
最大高度：160像素；
边框：1px纯红；
溢出：自动；
}
th{
位置：粘性；
排名：0；
背景：白色；
}
td，th{
填充：4px8px；
}

单位
接触
国家
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利

为什么这个问题被否决了投票？看看这个@AbhishekPandey谢谢，伙计，但是如果试图在jsfiddle中使用你的代码，我的最后一列没有正确对齐，我想使标题固定，正文可以滚动谢谢，伙计，这看起来很棒，如果你注意到最后一列的国家没有正确对齐其价值Hanks，伙计，我已经能够通过Adam的代码解决这个问题。感谢您的帮助检查最后一列及其值是否未对齐properly@Ratan请立即查看Atom，很抱歉，滚动条不存在now@Ratan哎呀！现在更正！