th、colgroup、col を使用してテーブル スタイルを定義する記事を推奨する_エクスペリエンス交換

テーブルの各列のスタイルを定義します。各 TD に大量のクラスを追加する必要はありません。th、colgroup、col などの属性を使用することで簡単に行うことができます。^_^
コードは次のとおりです。

コードをコピー a> コードは次のとおりです:

テーブル>

抛砖引玉，更多效果就由你DIY了！

テーブル.デモ { 境界崩壊: 崩壊; 色: #454545; フォント: 11px/150% Verdana、Arial、Helvetica、サンセリフ; } table.Demo th { パディング: 3px 7px; ボーダー: 1px ソリッド #f60; ボーダー幅: 2px 1px 1px; 背景: #ffffe1; } table.Demo td { パディング: 3px 7px; ボーダー: 1px ソリッド #f60; } table.Demo 列.Col1 { テキスト整列: 右; 背景: #f5f5f5; } table.Demo 列.Col2 { 色: #00c; } table.Demo 列.Col3 { フォント スタイル: イタリック体。 } スタイル> <table class="デモ"> <tr> <th>タグ名</th> <th>クラス名</th> <th>CSS</th> </tr> <col class="Col1"> <col class="Col2"> <col class="Col3"> <tr> <td>テーブル</td> <td>デモ</td> <td>border-collapse: 折りたたむ; 色: #454545; フォント: 11px/150% Verdana、Arial、Helvetica、サンセリフ;</td> </tr> <tr> <td> 番目</td> <td></td> <td>パディング: 3px 7px; ボーダー: 1px ソリッド #f60; ボーダー幅: 2px 1px 1px; 背景: #ffffe1;</td> </tr> <tr> <td>td</td> <td></td> <td>パディング: 3px 7px; ボーダー: 1px ソリッド #f60;</td> </tr> <tr> <td>列</td> <td>列1</td> <td>テキスト整列: 右; 背景: #f5f5f5;</td> </tr> <tr> <td>列</td> <td>列2</td> <td>色: #00c;</td> </tr> <tr> <td>列</td> <td>列 3</td> <td>フォント スタイル: イタリック体;</td> </tr>テーブル> <br><input onclick="runEx('runco​​de36545')" type="button" value="运行代码"><input onclick="doCopy('runco​​de36545')" type="button" value="复制代码"><input onclick="doSave(runco​​de36545)" type="button" value="保存代码">[Ctrl A 全选 注:<a href="/article/23421.htm" title="具体的な状況" target="_blank">必要に応じて外部Js必要刷新能力を実行</a>]<br> </table>

タグ名	クラス名	CSS
表	デモ	border-collapse: collapse; color: #454545; font: 11px/150% Verdana, Arial, Helvetica, sans-serif;
番目		パディング: 3px 7px; ボーダー: 1px solid #f60; border-width: 2px 1px 1px; background: #ffffe1;
td		パディング: 3px 7px; ボーダー: 1px solid #f60;
Col	Col1	text-align: right; background: #f5f5f5;
列	列2	色: #00c;
col	Col3	font-style: italic;