テーブルの枠線の隙間をなくす方法
テーブルのセルに枠線を付けると、デフォルトでは隙間ができてしまいます。この隙間をなくすには、border-collapseにcollapseを指定します。
サンプルコード
table {
border-collapse: collapse ;
}
デモ
スタイルあり
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse ;
}
table, th, td {
border: 1px solid #333 ;
}
</style>
</head>
<body>
<table>
<tbody>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
</tbody>
</table>
</body>
</html>
スタイルなし
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid #333 ;
}
</style>
</head>
<body>
<table>
<tbody>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
</tbody>
</table>
</body>
</html>
関連記事
- 埋め込みコンテンツをレスポンシブに対応する方法
- YoutubeやGoogle Mapsなどの埋め込みコンテンツを、レスポンシブに対応します。
- 三角形を作る方法
- CSSで三角形を作るには、横幅、高さが0の要素に幅の厚い枠線を付けます。
- br要素みたいに要素する方法
- CSSでbr要素と同じように改行させるには、\Aとwhite-spaceプロパティを利用します。
- dl要素を横並びにする方法
- dl要素を横並びに表示するには、dt要素にfloat: leftを適用し、dd要素の左余白を設けます。
- 画像や要素に枠線を付ける方法
- 画像などに枠線を付けるには、borderプロパティを利用します。
- 画像や要素の角を丸める方法
- 画像などの角を丸めるには、border-radiusプロパティを利用します。