Html td/th不工作时的宽度百分比（JSFIDLE）

我想用纯css设计一个表格，它的标题可以固定，而正文可以垂直滚动
这是我的

/*用于固定标题、垂直滚动正文的css*/
.fixedHeader{
宽度：100%；
}
.fixedHeader thead{
显示：块；
宽度：标定（100%-17px）；
}
.固定式头部t车身{
显示：块；
宽度：100%；
最大高度：200px；
溢出y：自动；
溢出x：隐藏；
}
/*表的自定义外观*/
.fixedHeader{
边框：1px纯色灰色；
边界塌陷：塌陷；
}
.固定标题，
.fixedHeader td{
边框：1px纯色灰色；
}

名称
颜色
描述
苹果
红色
这些是红色的。
梨
绿色
这些是绿色的。
葡萄
紫色/绿色
这些是紫色和绿色的。
橙色
橙色
这些是橙色的。
香蕉
黄色的
这些是黄色的。
几维鸟
绿色
这些是绿色的。
梅子
紫色
这些是紫色的
西瓜
红色
这些是红色的。
西红柿
红色
这些是红色的。
樱桃
红色
这些是红色的。
悬臂
橙色
里面是橙色的。
蜜露
绿色
里面是绿色的。
番木瓜
绿色
这些是绿色的。
覆盆子
红色
这些是红色的。
蓝莓
蓝色
这些是蓝色的。
芒果
橙色
这些是橙色的。
西番莲
绿色
这些是绿色的。

此链接： 应该有用。尝试使用此表上的CSS来提供帮助。以下是css：

table.scroll {
width: 100%; /* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th { 
height: 30px;
line-height: 30px;
/*text-align: left;*/
}

table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
width: 20%; /* Optional */
border-right: 1px solid black;
}

tbody td:last-child, thead th:last-child {
border-right: none;
}

编辑

Javascript是这方面的主键：

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
    return $(this).width();
}).get();

// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
});    
}).resize(); // Trigger resize handler

---

希望有帮助。

您可以使用固定宽度

td

和

th

并将

位置：fixed

指定给

thead

。因此，

thead

将保持在表的顶部，

tbody

将滚动

.fixedHeader{
宽度：480px；
最大高度：200px；
溢出y：自动；
溢出x：隐藏；
显示：块；
}
.fixedHeader thead{
位置：固定；
背景：蓝色；
颜色：白色
}
/*表的自定义外观*/
.fixedHeader{
边框：1px纯色灰色；
边界塌陷：塌陷；
}
.fixedHeader th、.fixedHeader td{
边框：1px纯色灰色；
宽度：150像素
}

名称
颜色
描述
苹果
红色
这些是红色的。
梨
绿色
这些是绿色的。
葡萄
紫色/绿色
这些是紫色和绿色的。
橙色
橙色
这些是橙色的。
香蕉
黄色的
这些是黄色的。
几维鸟
绿色
这些是绿色的。
梅子
紫色
这些是紫色的
西瓜
红色
这些是红色的。
西红柿
红色
这些是红色的。
樱桃
红色
这些是红色的。
悬臂
橙色
里面是橙色的。
蜜露
绿色
里面是绿色的。
番木瓜
绿色
这些是绿色的。
覆盆子
红色
这些是红色的。
蓝莓
蓝色
这些是蓝色的。
芒果
橙色
这些是橙色的。
西番莲
绿色
这些是绿色的。

输入您的

宽度：校准（100%-17px）。它必须是
calc
而不是“cal”。可能是@shubhamagrawal的副本，谢谢您的提供。这里的关键是调整th（s）的宽度，使其等于相应列的宽度。但我仍然不明白为什么th/td上的相对宽度（百分比）不起作用？