gpt4 book ai didi

html - 表格单元格(td,th)不采用 colgroup 中给定的宽度

转载 作者:太空宇宙 更新时间:2023-11-03 18:51:03 25 4
gpt4 key购买 nike

我正在尝试使用 colgroupcol 元素为表格单元格提供最小宽度。 table 由一个 div 包裹,它设置了一些宽度(小于 col 中设置的所有单元格的总宽度)和 overflow div 设置为 auto

这是我的 html 代码 -

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.table-block {
border-spacing: 0;
border-collapse: collapse;
}

.cell {
padding: 5px 10px;
border: 1px solid silver;
}
</style>
</head>
<body>
<div style="width:200px;overflow: auto">
<table class="table-block">
<colgroup>
<col style="width:300px">
<col style="width:300px">
</colgroup>
<tbody>
<tr>
<td class="cell"><em>2(0,2)</em></td>
<td class="cell"><em>3(0,3)</em></td>
</tr>
<tr>
<td class="cell"><em>2(0,2)</em></td>
<td class="cell"><em>3(0,3)</em></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

我的问题是单元格不采用 col 的宽度。它试图将自己放入包装器 div 中。我希望单元格采用给定的适当宽度并且应该出现滚动条。我有一个解决方案,我将 table 宽度设置为我需要的总宽度。这将要求我在每次通过 JavaScript 插入新列时更新 table 宽度。

我的解决方案-

<div style="width:200px;overflow: auto">
<table class="table-block" style="width:600px">
<!-- table things -->
</div>

这样做对吗?为什么会这样?

jsFiddle link

最佳答案

我认为这里的问题是表格最终默认为容器的 100% 宽度,如果没有内容强制它这样做,其内部元素无法超过此宽度。当试图给 trtd 一个比表格本身更大的宽度时,也会发生同样的情况。

您的修复方法与我的修复方法差不多。我要做的唯一改变是:

<div style" ... overflow-x:scroll; overflow-y:hidden;">

这样滚动条就不会出现在旧版 IE 的旁边。

这当然假设您只希望表格水平滚动。

关于html - 表格单元格(td,th)不采用 colgroup 中给定的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14952166/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com