当分配为宽度 ="#%"时,表 > td 宽度的 HTML 5 验证错误

标签 html css html-table

Error Details:

The width attribute on the td element is obsolete. Use CSS instead. From line 81, column 15; to line 82, column 50:

<tr><td width="6%" class="texalign_right">Name:</t..
<tr><td width="6%" class="texalign_right">Details:</td></tr>

我当前的网站上有 20 多张 table 和许多不同数量和尺寸的内部 td。我相信通过类为每个表分配宽度,然后在 td 内分配宽度会让我生病。

为了避免这种情况,我可以简单地在具有“style”属性的表中对表和相应的 td(仅适用于第一行)的宽度进行硬编码。这有意义吗?

更重要的是,当前表#(20)可能会增加到(30或40)。

我真的不喜欢硬编码!所以我非常感兴趣是否有其他方法来处理表格宽度。

最佳答案

您可以使用<colgroup> HTML 5 的元素。然后您可以定义可以重复使用的不同类,以便

  • 对于所有带有 width=6% 的列,定义一个类colWidth6
  • 对于所有带有 width=8% 的列,定义一个类colWidth8

您无需为表本身定义单独的类。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style type="text/css">
            .colWidth6{width:6%}
            .colWidth8{width:8%}
        </style>
    </head>
    <body>
        <table border="1">
            <colgroup>
                <col class="colWidth6">
                <col class="colWidth8">
            </colgroup>
            <tbody>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

关于当分配为宽度 ="#%"时,表 > td 宽度的 HTML 5 验证错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9996028/

相关文章:

html - 媒体查询 CSS 仅在本地和网络中有效

html - 如何根据子 div 的存在将背景图像设置为最外层的 div?

jQuery 定位下一个位于不同级别的隐藏 div

css - 如何使内部 DIV 宽度成为设置为自动的外部 div 宽度的百分比

javascript - JQuery 交换列

html - 纯 CSS3 不断移动的 slider

javascript - 将 HTML 显示为文本,更改 BBCode 以显示为 HTML JQuery/JS

css - 如何使用 Firebug 调试仅在单击时出现的元素的 CSS?

html - 另一个表格 HTML 中的全宽表格

javascript - 如何从 HTML 表格创建可下载的 Excel 工作表?