Udemyの人気コースが今なら80%OFF!

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

【CSS3】テーブルの枠線を重ねて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;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です