如何使表格的宽度固定答案

【问题标题】：How to make table's width fixed如何使表格的宽度固定
【发布时间】：2014-12-28 00:40:52
【问题描述】：

我在一个表中有两个表：

    <table>
        <tbody>
            <tr>
                <td class="tdkqtb">
                    <table border="1">
                        <tbody>
                            <tr>
                                <th>Giải</th>
                                <th>@cityID</th>
                            </tr>
                        </tbody>
                    </table>
                </td>

                <td class="tdkqtb">
                    <table border="1">
                        <tbody>
                            <tr>
                                <th>Đầu</th>
                                <th>Đuôi</th>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr></tr>
        </tbody>

    </table>

现在我需要将两个表格的宽度设置为固定值。我怎样才能做到这一点？例如，我希望所有表格的宽度都与前两个相同。我的意思是它们的每一列必须有一个固定的宽度，第一个表将包含父表的 70% 宽度，第二个包含其余部分。两个表中的列也必须具有固定宽度！

【问题讨论】：

那么宽度应该是多少？您的代码仅显示一个包含两个简单表的表，而不是实际生成所示图像的代码。尽管可以推断出这个想法，但问题是应该如何设置宽度。固定宽度应该是多少，父表宽度应该是多少？除了用文字描述之外，展示您实现这一目标的尝试，将极大地帮助您了解问题所在。

标签： html css html-table width

【解决方案1】：

不确定我是否理解你想要的，但你可以选择表格或整个表格的所需元素并在 css 中给出宽度

table {
    width: 70%;
}

如果您有多个表，请为它们提供 id 或类以分隔不同的样式。 th、tr、td 等也一样。

【讨论】：

我给父表 100% 宽度，第一个表 70%，第二个 30%，看起来效果不太好！
为什么两个表之间有差距？
jsfiddle.net/8m4sw1o3 看看这个 sn-p。不确定它是不是你想要的，但我建议创建两个单独的表。
完美，我没有意识到我们必须设置 td 的宽度，顺便说一下，两个表分开是什么意思？这是否意味着我们不需要父表来“覆盖”它们？
好吧，我的意思是你为什么要把两张桌子放在一张桌子上。您可以简单地并排创建两个表。

【解决方案2】：

首先，为什么不去Tableless？

然后你必须把一些 CSS 放进去，就像 DasBoot 说的那样，给一个完整的表格一个宽度，你应该这样做：

table {
    width: 70%;
}

对于特定的 td、tr、th 或您想要设置样式的任何元素也是如此。如果您想要的是最大宽度或最小宽度，您可以适当地使用max-width 和min-width。为什么不将此代码放在 jsfiddle 上并实时测试结果以查看您需要做什么？

问候。

【讨论】：

不是问题的答案。此外，建议对显然是表格的数据采用非表格方法是不明智的。