gpt4 book ai didi

html - 奇怪的 TABLE 大小调整行为

转载 作者:行者123 更新时间:2023-11-28 17:16:21 25 4
gpt4 key购买 nike

我不明白为什么 table 大小调整会按现在的方式工作。这是我的示例 HTML:

<!DOCTYPE html>
<html>
<head>
<title>Table sizing test</title>
</head>
<body>
<style>
.tab-strip {
overflow: hidden;
white-space: nowrap;
}
.tab-strip .tab-button {
display: inline-block;
}
.tab-strip .tab-button td {
background-color: yellow;
}
.tab-strip .tab-button td:first-child {
background-color: green !important;
width: 100px;
}
</style>
<div>
<table align="center" border="1">
<tr>
<td valign="top">
<div class="tab-strip">
<table class="tab-button">
<tr>
<td></td>
<td>TEST1</td>
</tr>
</table>
<table class="tab-button">
<tr>
<td></td>
<td>TEST2</td>
</tr>
</table>
<table class="tab-button">
<tr>
<td></td>
<td>TEST3</td>
</tr>
</table>
<table class="tab-button">
<tr>
<td></td>
<td>TEST4</td>
</tr>
</table>
<table class="tab-button">
<tr>
<td></td>
<td>TEST5</td>
</tr>
</table>
<table class="tab-button">
<tr>
<td></td>
<td>TEST6</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

我把它放在一个 jsFiddle 里:http://jsfiddle.net/90674xsg/

当窗口变窄时,table 一直缩小(小于其内容)直到某个点,然后停止(导致结果窗口中出现水平滚动条)。但是,什么决定了这个最小宽度?

更新:
有人向我指出,表格宽度是通过将实际包含内容的单元格的内容派生宽度相加来确定的。因此,“TESTx”单元格的宽度被计算在内,但空单元格的宽度被忽略,即使它们具有 100 像素的固定宽度。如何使最小 table 宽度包括它们的宽度?

最佳答案

表格有点奇怪,现代 Web 开发避开它们是有充分理由的。

添加 CSS min-width property 似乎对我有用,但我只在 chrome 中测试过。

.tab-strip .tab-button td:first-child {
background-color: green !important;
width: 100px;
min-width: 100px;
}

See updated fiddle here .如果这不起作用,您可以尝试使用填充而不是宽度强制它保持打开状态 - 或者向宽度为 100px 的 td 添加一个空 div。

关于html - 奇怪的 TABLE 大小调整行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28501826/

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