gpt4 book ai didi

html - firefox 没有为我的表格标题呈现正确的宽度

转载 作者:行者123 更新时间:2023-11-28 03:44:32 27 4
gpt4 key购买 nike

th 边框和 td 边框在 firefox 中不对齐,但在 chrome 中对齐。我希望我的 table 完美对齐,这就是为什么我有硬编码的宽度和所有内容,但 firefox 无法识别它。我还可以看到 inspect element 中指定的宽度与我在两个浏览器中提供的宽度不同。在 chrome 中没问题,但 fire fox 根本帮不了我。提前致谢。

<!DOCTYPE html>
<head>
<style type="text/css">
th,td{
border-right:2px solid blue;
border-bottom: 2px solid blue;
}
</style>
</head>
<body>
<table id="example3" style="display:inline-block;"">
<thead style="background-color: wheat">
<tr>
<th width="50px"><input style="float:left" type="checkbox"></th>
<th width="180px">Model</th>
<th width="180px">Color</th>
<th width="180px">Year</th>
</tr>
</thead>
<tbody style="display:inline-block;overflow-x:hidden;overflow-
y:auto;height:100px;">
<tr><td width="50px"><input type="checkbox"></td><td width="180px">
<span><input type="text"></span></td><td width="180px"><input
type="text"></td><td width="180px"><span><input type="text"></span></td>
</tr>
<tr><td width="50px"><input type="checkbox"></td><td width="180px">
<span><input type="text"></span></td><td width="180px"><input
type="text"></td><td width="180px"><span><input type="text"></span></td>
</tr>
<tr><td width="50px"><input type="checkbox"></td><td width="180px">
<span><input type="text"></span></td><td width="180px"><input
type="text"></td><td width="180px"><span><input type="text"></span></td>
</tr>
<tr><td width="50px"><input type="checkbox"></td><td width="180px">
<span><input type="text"></span></td><td width="180px"><input
type="text"></td><td width="180px"><span><input type="text"></span></td>
</tr>
<tr><td width="50px"><input type="checkbox"></td><td width="180px">
<span><input type="text"></span></td><td width="180px"><input
type="text"></td><td width="180px"><span><input type="text"></span>
</td></tr>
<tr><td width="50px"><input type="checkbox"></td><td width="180px">
<span><input type="text"></span></td><td width="180px"><input
type="text"></td><td width="180px"><span><input type="text"></span></td>
</tr>
<tr><td width="50px"><input type="checkbox"></td><td width="180px">
<span>
<input type="text"></span></td><td width="180px"><input type="text">
</td><td width="180px"><span><input type="text"></span></td></tr>
<tr><td width="50px"><input type="checkbox"></td><td width="180px">
<span>
<input type="text"></span></td><td width="180px"><input type="text">
</td><td width="180px"><span><input type="text"></span></td></tr>
</tbody>

</table>
<input type="button" id="add" value="add">
</body>
</html>

最佳答案

添加以下 CSS。

th, td{
box-sizing: border-box;
}

看起来边框导致宽度增加。

如果不向元素添加此 CSS 属性,边框将始终增加元素的大小。

关于html - firefox 没有为我的表格标题呈现正确的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44056011/

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