見栄えの良いテーブル表cssスタイルコードを推奨 詳細
2022-01-17 22:02:23
素敵なテーブルテーブルスタイルcssソースコード素敵なテーブルテーブルスタイル
ソースコード
<head>
<title></title>
<style type="text/css">
table
{
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
table td, table th
{
border: 1px solid #cad9ea;
color: #666;
height: 30px;
}
table thead th
{
background-color: #CCE8EB;
width: 100px;
}
table tr:nth-child(odd)
{
background: #fff;
}
table tr:nth-child(even)
{
background: #F5FAFA;
}
</style>
</head>
<body>
<table width="90%" class="table">
<caption>
<h2>
Percentage of energy consumption in the workshop</h2>
</caption>
<thead>
<tr>
<th>
Workshops
</th>
<th>
Capacity
</th>
<th>
Electricity
</th>
<th>
Single consumption
</th>
</tr>
</thead>
<tr>
<td>
109
</td>
<td>
13
</td>
<td>
1.34
</td>
<td>
213
</td>
</tr>
<tr>
<td>
109
</td>
<td>
13
</td>
<td>
1.34
</td>
<td>
213
</td>
</tr>
<tr>
<td>
109
</td>
<td>
13
</td>
<td>
1.34
</td>
<td>
213
</td>
</tr>
<tr>
<td>
109
</td>
<td>
13
</td>
<td>
1.34
</td>
<td>
213
</td>
</tr>
<tr>
<td>
109
</td>
<td>
13
</td>
<td>
1.34
</td>
<td>
213
</td>
</tr>
<tr>
<td>
109
</td>
<td>
13
</td>
<td>
1.34
</td>
<td>
213
</td>
</tr>
</table>
</body>
</html>
この記事は、見栄えの良い表テーブルのCSSスタイルのコードの詳細については、このに導入され、より関連する見栄えの良い表テーブルのCSSスタイルのコンテンツをお勧めしますスクリプトハウスの過去の記事を検索するか、次の関連記事を参照してください続けるあなたは、よりスクリプトハウスをサポートしています願っています！.
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン