Question

我的下表包含一些内部和内联样式。它对我有用，但最近我注意到表格格式被破坏了（内联样式被主站点的样式覆盖并停止工作，只应用了字体的内部样式）。如何正确地将这些混合的内部和内联样式转换为内部？使用ID选择器而不是类更好吗？

CSS： table.myTable td, th { font-size:14px; }

HTML：

<table class="myTable" style="border-collapse:collapse;" align="left" border="1" cellpadding="4" cellspacing="0">
    <tbody>
        <tr>
            <td rowspan="3">..</td>
            <th>aaaa</th>
            <th>bbbb</th>
            <th>cccc</th>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
</table>

编辑：这个CSS对我有用：

table.myTable {border-collapse: collapse;}
table.myTable th, table.allsizes td {border: 1px solid #cccccc;}
table.myTable td,th {padding: 5px;}
table.myTable td,th {font-size: 14px;}

<table class="myTable">

Answer 1

如果要在单个页面上的多个区域中应用样式，则不应使用ID。如果您的样式被破坏，请在<head>标记或外部样式表文件中设置一个类，并在那里应用您的属性。这样你可以避免任何冲突。

保持简单并尝试在外部样式表中完成所有样式，并在您要多次应用属性时使用类。如果您有与之竞争的iframe，那么您可以尝试使用!important功能 - 这不是最优雅的解决方案，但如果它未应用于iframe之外的上述css，那么它将会有效。

另一个更好的解决方案是使用JQuery使用.css（）函数更改css，如下所示：$(".myTable").css( "font-size", "14px" );。或者，如果可以的话，给你的表一个唯一的类名，它不会与上面的iframe给你的任何css类名冲突。

Answer 2

table.myTable {border-collapse: collapse;}
table.myTable th, table.allsizes td {border: 1px solid #cccccc;}
table.myTable td,th {padding: 5px;}
table.myTable td,th {font-size: 14px;}

将混合内部和内联样式转换为内部样式

2 个答案: