Categories: HTML&CSS

テーブルの枠線を重ねて1pxで表示する方法

テーブルの枠線を1pxで表示する方法


STEP.1
tableに枠線を引く

テーブルを作って枠線を引きます。

See the Pen
table1
by shiakisudev (@shiakisu)
on CodePen.


このままだと、各要素が離れて表示されてしまっています。


STEP.2
枠線を重ねる

「border-collapse:collapse」を付与することによって枠線を重ねることが出来ます。

See the Pen
table2
by shiakisudev (@shiakisu)
on CodePen.



完成版ソース

ソースを以下に抜粋しておきます。

HTML

<table>
<tr>
  <th>ヘッダ1</th>
  <td>データ1</td>
</tr>  
<tr>
  <th>ヘッダ2</th>
  <td>データ2</td>
</tr>  
<tr>
  <th>ヘッダ3</th>
  <td>データ3</td>
</tr>  
</table>

CSS

table{
  border-collapse:collapse;
}
th{
  background-color:red;
  border:solid 1px;
}
td{
  border:solid 1px;
}

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp