标准固定台宽答案

【问题标题】：Standard fixed table width标准固定台宽
【发布时间】：2011-02-04 20:56:40
【问题描述】：

是否有一种标准方法可以计算 HTML 中表格的固定宽度值？现在，我正在将网页上的表格格式化为固定宽度，我有一个在另一个表格中的表格，在 IE 中测试页面时，我注意到冒号的对齐方式如下图所示说明。我的目的是确保冒号像在 Firefox 中一样正确对齐，并且只是好奇这种不对齐是由于 HTML 中的设置还是与浏览器呈现页面的方式有关。

火狐：

Internet Explorer：

更新：

很抱歉没有提供任何参考代码，这是我正在处理的特定部分的 sn-p。

<div style="width: 1600px; text-align: center; position: absolute; top: 10%; left: 0%;">
    <span id="labelInstructions" style="font-size: xx-large;">PAGE TITLE <br><br></span>
    <table style="width: 1000px;" align="Center" border="0">
        <tbody>
            <tr>
                <td style="width: 1000px;"><label for="FileUpload1" style="font-size: x-large;">ENTER: </label><input name="FileUpload1" id="FileUpload1" size="70%" type="file"></td>
            </tr>
            <tr>
                <td style="width: 1000px;"><span id="fileUploadError" style="color: Red; font-size: medium;"><br><br></span></td>
            </tr>
            <tr>
                <td style="width: 1000px;">
                <table style="width: 1260px;" border="0">
                    <tbody>
                        <tr>
                            <td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE INSTRUCTIONS:</td>
                            <td style="font-size: x-large; width: 1800px;" align="left" valign="top">INSTRUCTION 1<br>INSTRUCTION 2<br></td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                        <tr>
                            <td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE EXAMPLE:</td>
                            <td style="font-size: x-large; width: 1800px;" align="left" valign="top">EXAMPLE 1<br>EXAMPLE 2<br><br></td>
                        </tr>
                    </tbody>
                </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

我知道它很丑，只是一个注释，这是一个 ASP.Net 生成的网页，我正在从后面的代码中以编程方式设置 HTML 元素的属性。我有点继承了这一点，我的雇主希望将重大变化保持在最低限度。

更新 2：

当我调整内部表格宽度时，当设置为 1377 像素时，我可以让它在 IE 中对齐。对于 Firefox，对齐的最佳位置是 1260 像素。

【问题讨论】：

作为最后的手段，我只会对嵌套表执行此操作。无论如何，一些 html 和/或 css 会有所帮助，或者至少有一些边框能够正确查看布局。我的猜测是您需要制作固定宽度的 TD 并允许换行，但也许您已经采用了这种方式？

标签： asp.net html xhtml w3c

【解决方案1】：

您所要做的就是使表格列的宽度彼此相同。

样式示例：

table tr td:first-child { background-color:yellow; width:200px; }

HTML：

<table>
  <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
  <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
  <tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr>
</table>

【讨论】：

【解决方案2】：

很抱歉没有直接回答您的问题，但是...

Stoneage 结束了！您真的不应该将表格用于布局目的，因为它们对于残疾人来说几乎无法访问，并且会使您的 HTML 文件太大（相对于内容而言）。

内容和布局分开，使用CSS。

【讨论】：

这是一个意识形态问题，不利于他说，“想想你到目前为止所做的一切”。
是的，我很抱歉没有直接回答他的问题，但我就是受不了桌子的布局。不好意思，朋友。 :)
首先，这更适合作为评论，而不是问题的答案。其次，虽然您认为使用基于表格的布局是“过时的”是正确的，但您不能仅仅假设他有选择权......也许他正在维护一个客户网站并且他们不想为重新设计付费？也许他正在使用此代码为表格数据创建布局（使用表格比使用 div 更合规的场景）。你明白了……
不想开始争论，只是认为我们仍然使用石器时代发明的轮子。 :) 和平
@ andre_roesti - 我明白你的意思，我也不会这样设计它。正如我在更新中所说的，这是我继承的东西，是的，正如摩西所建议的那样，这个系统要复杂得多。我的雇主有我必须考虑的特殊要求，所以我必须用我所拥有的东西工作。

【解决方案3】：

确保将要对齐的部分放在一个表格中。

<table id="layout">
    <tr><td>HEADER</td>
    <tr><td>
        <table id="form">
            <tr><td>LABEL</td><td>INPUT FIELD</td></tr>
            <tr><td>LABEL</td><td>INPUT FIELD</td></tr>
            <tr><td>LABEL</td><td>INPUT FIELD</td></tr>
        </table>
    </tr>
    <tr><td>FOOTER</td>
</table>

【讨论】：

【解决方案4】：

我将创建两个类，left 和 right，并将左侧类应用于左侧的 <td>，将右侧的类应用于右侧的 <td>。左边的类是这样的

.left{width:100px; text-align:right;}

heres an example

【讨论】：