我有一个带有一个或多个固定宽度列的HTML表。 有时，此类列的内容超出了列的宽度，我想在表格列的底部使用一个滚动条。
我想保持相同的语义HTML结构，并且没有重复的表或多次迭代。
我想要尽可能少的JavaScript
如果可以的话，我可以将其转换为CSS Grid或Flexbox(但以前没有使用过)
我已经注意到，HTML是一个colgroup ，看起来我可以设置width和其他CSS属性，但不能overflow 。
.table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
.table-row {
box-shadow: 0 0 1px 1px yellowgreen;
}
.table-cell {
box-shadow: 0 0 1px 1px blue;
}
.table-colgroup--first {
background: palegoldenrod;
}
.table-colgroup--second {
background: paleturquoise;
/*
* I would like to pass the width of the column here
*/
width: 50px;
overflow-x: scroll;
}
.table-colgroup--third {
background: palegreen;
}
/* This is intentionally long so that a scrollbar appears somewhere */
.table-cell--second p {
width: 900px;
background: #666;
color: #fff;
}
请使用我尝试过的代码检查我的Codepen示例： 代码示例
html溢出宽度控制 html - 具有固定宽度列的HTML / CSS表（如果内容溢出 则滚动） - 堆栈内存溢出...
