奇怪的 TABLE 大小调整行为

Question

我不明白为什么 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/

当window变窄时，table一直缩小（小于它的内容）直到某个点，然后停止（导致结果中出现水平滚动条window).但是，什么决定了这个最小宽度？

更新：
有人向我指出 table 宽度是通过将实际包含内容的单元格的内容派生宽度相加来确定的。因此 "TESTx" 单元格的宽度被计算在内，但是空单元格的宽度被忽略，即使它们具有固定的 100px 宽度。我怎样才能使最小 table 宽度包括它们的宽度？

Answer 1

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

添加 css min-width 属性似乎对我有用，但我只在 chrome.

中测试过

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

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

奇怪的 TABLE 大小调整行为

Odd TABLE sizing behaviour

html

css

html-table