【问题标题】:Which is the better way of specifying HTML Fixed Column width (width or style attribute)哪个是指定 HTML 固定列宽(宽度或样式属性)的更好方法
【发布时间】:2010-12-04 04:18:23
【问题描述】:

我想问一下指定HTML列宽的更好方法是什么?宽度属性还是样式属性?假设我使用的是 IE 6。IE 渲染宽度属性是否优于样式?

按宽度属性

<table width="900">
    <tr>
        <td width="450">A</td>
        <td colspan="2" width="450">B&C</td>
    </tr>
    ....
</table>

样式属性的OR

<table style="width:900px;">
    <tr>
        <td style="width: 450px;">A</td>
        <td colspan="2" style="width: 450px;">B&C</td>
    </tr>
    ....
</table>

【问题讨论】:

    标签: html css internet-explorer html-table width


    【解决方案1】:

    首先在我回答你的问题之前,你应该知道表格是如何呈现的,尝试表格元素的表格布局固定样式:

    如果浏览器预先知道第一个表格行列的宽度(如果您在表格上提供表格布局固定样式),则浏览器甚至可以在计算任何结果行的宽度之前开始渲染表格顶部。这意味着什么?由具有固定布局的 Ajax 调用填充的表可以在完整的 ajax 调用完成之前开始向用户显示结果。考虑这一点的最佳方式就像是渐进式 jpg。最后,您的页面似乎加载速度更快。

    table
    {
    table-layout:fixed;
    }
    

    现在回答你的问题。

    实际上,您提供的示例都不正确。您通常不会在跨越 2 个或更多单元格的单元格上设置宽度。在任何表格中,最好用所有单元格创建至少 1 行,这可以在 TH 中或(就像我喜欢在空白 tr 中那样。

    例如...

    <table>
    <tr>
    <td width="450"></td>
    <td width="225"></td>
    <td width="225"></td>
    </tr>
    <tr>
    <td>content here</td>
    <td colspan="2">content here</td>
    </tr>
    </table>
    

    无论您决定使用样式还是仅使用标准 html 宽度,您都可以选择,但最终您应该拥有第一行(如果表格布局固定)或任何行(如果表格布局不固定)包含每个单独单元格的宽度定义。这也将帮助您规划正确的表,希望这会有所帮助。

    通过创建一个像 10 000 行的巨大表格来测试固定的表格布局,并测试渲染速度与非固定表格布局。

    我认为关于 HTML 4 与 XHTML、样式与属性的整个争论实际上是可维护性的问题。我认为使用样式设置宽度或使用 HTML 4 过渡的普通宽度设置宽度没有任何问题,它们都做同样的事情。你可以同时做这两个的原因是因为 HTML 已经进化了一点,是的,它可能会变得混乱!祝你好运

    【讨论】:

    • 嘿,谢谢!我不知道 table-layout:fixed。
    【解决方案2】:

    只需在&lt;td&gt; 内添加&lt;div&gt; 标签或&lt;th&gt;&lt;div&gt; 内定义宽度。这将对您有所帮助。没有其他工作。

    例如。

    <td><div style="width: 50px" >...............</div></td>
    

    【讨论】:

    • 您好,欢迎来到我们的网站。请不要用重复的答案(例如 ^^^ 和 this)向已接受答案的旧问题发送垃圾邮件。如果您这样做,那么这两个问题可能都是重复的,因此请这样标记。在这些情况下,问题得到了愉快的解决,所以除非您有任何全新的内容要添加,否则我建议您提出新的和未回答的问题。谢谢。
    猜你喜欢
    • 2018-09-05
    • 2023-03-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-10
    • 2021-12-03
    • 2021-12-12
    • 2012-01-01
    相关资源
    最近更新 更多