tableのtrに設定したborder-bottomを綺麗にしたい

前提・実現したいこと

tableタグのtrタグにborder-bottom: dottedを設定しています。
下記はサンプルです。
JS Bin

thタグとtdタグの境目でドットが重なっているので、thの左端からtdの右端までドットが等間隔になるようにHTMLとCSSを修正したいです。

発生している問題・エラーメッセージ

thとtdの境目でドットが重なっています。

該当のソースコード

html
1<body>
2  <table>
3    <tr>
4      <th>名前</th>
5      <td>太郎</td>
6    </tr>
7  </table>
8</body>

css
1table {
2  width: 100%;
3  table-layout: fixed;
4  border-collapse: collapse;
5  padding: 1em;
6}
7
8tr {
9  border-bottom: dotted 3px;
10}
11
12th {
13  width: 5em;
14}

試したこと

trにborder-bottomの代わりにthとtdそれぞれに設定してみましたが、結果は変わりませんでした。

Lhankor_Mhy

2020/11/28 01:03

Firefox では再現しませんでした。Chromeですか？

evgenia

2020/11/28 01:10

Chromeです。

行動規範の内容に同意します

回答3件

border-collapse:separateとborder-spacingを使ってみるのはどうでしょうか。
ただし、この場合は Firefox での表示はボーダーが切れている感じになります。

css
1table {
2  width: 100%;
3  table-layout: fixed;
4  padding: 1em;
5  border-spacing: 3px 0;
6}
7
8th,td {
9  border-bottom: dotted 3px;
10}

投稿2020/11/28 01:49

Lhankor_Mhy

総合スコア36928

table要素のmargin-collapseとpaddingを初期値(separatedと0)に戻して、th要素とtd要素にborder-bottomを設定する。

CSS
1table {
2  width: 100%;
3  table-layout: fixed;
4}
5
6th {
7  width: 5em;
8  border-bottom: dotted 3px;
9}
10
11td {
12  border-bottom: dotted 3px;
13}

投稿2020/11/28 01:10

Daregada

総合スコア11990

evgenia

2020/11/28 01:17

ご回答いただきありがとうございます。thのボーダー右端とtdのボーダー左端が微妙に詰まっていました。

行動規範の内容に同意します

ベストアンサー

trの疑似要素にborder-bottomを設定したらどうでしょうか。

css
1table {
2  width: 100%;
3  table-layout: fixed;
4  border-collapse: collapse;
5  padding: 1em;
6}
7table tr {
8  display: block;
9  position: relative;
10}
11table tr::after {
12  content: "";
13  display: block;
14  width: 100%;
15  height: 1px;
16  position: absolute;
17  bottom: 0;
18  left:0;
19  border-bottom: dotted 3px;
20}
21th {
22  width: 5em;
23}