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/

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

更新：
我已经向我指出，表格宽度是通过将实际包含内容的单元格的内容派生宽度相加来确定的。那么＆＃34; TESTx＆＃34;细胞＆＃39;计算宽度，但即使它们具有100px的固定宽度，也会忽略空单元格宽度。如何使最小table宽度包括其宽度？

Answer 1

表格有点奇怪，现代网络开发远离它们是有充分理由的。

添加css min-width属性似乎对我有用，但我只测试了chrome。

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

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

奇数表的大小调整行为

1 个答案: