テーブルの列をストライプにする

列ごとに背景色をストライプしています。

table data	table data	table data
table data	table data	table data
table data	table data	table data
table data	table data	table data
table data	table data	table data

Source Code

右上の「コピー」からご利用ください。

コピー

<table class="my-parts">
	<tr><th>table data</th><th>table data</th><th>table data</th></tr>
	<tr><td>table data</td><td>table data</td><td>table data</td></tr>
	<tr><td>table data</td><td>table data</td><td>table data</td></tr>
	<tr><td>table data</td><td>table data</td><td>table data</td></tr>
	<tr><td>table data</td><td>table data</td><td>table data</td></tr>
</table>

コピー

.my-parts {
  border-collapse: collapse;
  border: 1px solid rgba(0,0,0,.1);
  table-layout: fixed;
  width: 100%;
}
.my-parts th, .my-parts td {
  border: 1px solid rgba(0,0,0,.1);
  padding: .6em;
  text-align: center;
  background: #fff;
}
.my-parts th {
  background: #F44336;
  color: #fff;
  font-weight: bold;
}
.my-parts tr > td:nth-child(odd) {
  background: #FFCDD2;
}
.my-parts tr > td:nth-child(even) {
  background: #EF9A9A;
}

Webパーツ屋とは？

HTMLとCSSをコピペで貼り付ければ実装できるコードをストックしているところです。「このデザインってどうやって実装するんだっけなぁ。。。」と調べる無駄な時間や自分で1からコーディングする時間を短縮することが目的です。

コーディングなんて所詮はデザインにそってHTMLやCSSを当てはめていくだけの単純作業です。当サービス「Webパーツ屋」をご活用いただきスピーディなコーディングを行なっていきましょう！

「コピペ」で簡単！Webパーツ屋

テーブルの列をストライプにする

Source Code

Webパーツ屋とは？

免責事項