100% 宽度的表格单元格答案

【问题标题】：100% width table cell100% 宽度的表格单元格
【发布时间】：2011-03-03 21:21:08
【问题描述】：

我有这个表格布局。我想将整个内容向右对齐。所以我使用width: 100%; 的一个单元格。通常一切看起来都很好。
但是有些东西，我不明白。如果具有colspan的单元格中的内容比该列中的正常单元格大（您可以通过单击Click to test button进行测试），它会破坏整个布局。
这发生在 Chrome、Safari 4 和 5、IE8 上，但在 Opera、FF 和 IE7 上是可以的。

有什么想法吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>TEST</title>
    <style type="text/css">
        table { width: 100%; }
        table td { border: 1px solid black; white-space: nowrap; }
        .delimiter { width: 100%; }
    </style>
    </head>
    <body>
        <table>
            <tr>
                <td><label>Row 1</label></td>
                <td>&nbsp;</td>
                <td><input type="text" value="Field 1" id="field1" size="25"></td>
                <td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td>
                <td class="delimiter">&nbsp;</td>
            </tr>
            <tr>
                <td><label>Row 2</label></td>
                <td>&nbsp;</td>
                <td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td>
            </tr>
        </table>
    </body>
</html>

【问题讨论】：

标签： html html-table cell

【解决方案1】：

使用 W3C 标准以节省跨浏览器编码。 javascript 代码跨浏览器安全的最佳解决方案是用户 jQuery。这种工具/功能更方便。

【讨论】：

好吧，我不能使用 jQuery，因为那时我将不得不重写整个应用程序 :) “使用 W3C 标准”是什么意思？
jQuery，虽然一个非常流行和广泛实现的库并不是前端设计的全部和结束。选择不使用该库是完全可以接受的。

【解决方案2】：

当您说它在某些浏览器中有效而在其他浏览器中无效时，我并不感到惊讶。欢迎来到开发 Web 应用程序的真实世界。我还没有深入研究为什么浏览器会以不同的方式刷新它们的布局，因为我了解到这可能是一个时间黑洞。相反，我提出了以下解决方案：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<style type="text/css">
    table { width: 100%; }
    table td { border: 1px solid black; white-space: nowrap; }
    .delimiter { width: 100%; }
</style>
</head>
<body>
    <table>
        <tr>
            <td><label>Row 1</label></td>
            <td>&nbsp;</td>
            <td class="delimiter">
                <table><tr>
                    <td><input type="text" value="Field 1" id="field1" size="25" /></td>
                    <td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;" /></td>
                    <td class="delimiter">&nbsp;</td>
                </tr></table>
            </td>
        </tr>
        <tr>
            <td><label>Row 2</label></td>
            <td>&nbsp;</td>
            <td>
                <table><tr>
                    <td><input type="text" id="field2" value="Field 2" size="25" /></td>
                    <td class="delimiter">&nbsp;</td>
                </tr></table>
            </td>
        </tr>
    </table>
</body>
</html>

我知道这不是最漂亮的解决方案，但作为原始 html，它确实有效。在 Chrome 和 IE10 中测试。

【讨论】：