table : trタグのborder線が表示されない
<tabel>
タグの<tr>
に対してborder線を表示させたい場合、tableに対してborder-collapse: collapse;
を使用することでtrタグにborderが使用可能になります。
table{
border-collapse:collapse;
}
thead > tr{
border-bottom:1px solid #222;
}
tbody > tr{
border-bottom:1px solid #222;
}
もし上記のプロパティを試しても変化がないようでしたらCSSの入れ子問題かと思います。
もう一度、「子孫セレクタ」「直下セレクタ」「隣接セレクタ」「間接セレクタ」を確認してみましょう。デベロッパーツールで検証しながら修正してみるといいかもしれません。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border-collapse:collapse;
}
thead > tr{
border-bottom:1px solid #222;
}
tbody > tr{
border-bottom:1px solid #222;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>sample.1</th>
<th>sample.2</th>
<th>sample.3</th>
</tr>
</thead>
<tbody>
<tr>
<td>sample.sample.sample.sample.</td>
<td>sample.sample.sample.sample.</td>
<td>sample.</td>
</tr>
<tr>
<td>sample</td>
<td>sample</td>
<td>sample.</td>
</tr>
</tbody>
</table>
</body>
</html>