table.htmlのスクロールをしていたのですが、表の見出しAからCまでのタイトル欄のところと内容A1が~C5まどの文字は上手く表示されましたが、中の縦の線2本と横の線3本が消えてしまいました。どうしたらいいのでしょうか?
table.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="table.css" rel="stylesheet">
</head>
<body>
<table>
<thead>
<tr>
<th>見出しA</th><th>見出しB</th><th>見出しC</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容A1</td><td>内容B1</td><td>内容C1</td>
</tr>
<tr>
<td>内容A2</td><td>内容B2</td><td>内容C2</td>
</tr>
<tr>
<td>内容A3</td><td>内容B3</td><td>内容C3</td>
</tr>
<tr>
<td>内容A4</td><td>内容B4</td><td>内容C4</td>
</tr>
<tr>
<td>内容A5</td><td>内容B5</td><td>内容C5</td>
</tr>
</tbody>
</table>
</body>
</html>
table.css
@charset "utf-8";
table {
border: 1px solid #000000;
border-collapse: collapse;
}
thead{
background-color: #e2f0d9;
display: block;
}
tbody {
height: 150px;
display: block;
overflow-y: auto;
}
table th, table td{
border: 1px; solid #0000000;
width: 100px;
height: 50px;
}
table th{
background-color: #e2f0d9;
font-weight: normal;
}