JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<thead>
<tr>
<th>column A</th>
<th>column B</th>
<th>colmun C</th>
</tr>
</thead>
<tbody>
<tr>
<td>日本語</td>
<td>こんにちは</td>
<td>BBBBBBBBBBBBBB</td>
</tr>
<tr>
<td>English</td>
<td>Hello</td>
<td>BBBBBBBBBBB</td>
</tr>
</tbody>
</table>

CSS

* {
  box-sizing: border-box;
}

:root {
  --table-padding: 0.7em;
  --line-char-width: 6px; /* | の幅。1chだとちょっと太い */
}

table {
  text-align: left;
  border-collapse: collapse;
  border-spacing: 0;
}

/*
 * 左右の罫線
 */
th::before,
td::before {
  content: "|";
  font-weight: normal;
  margin-right: var(--table-padding);
}

th,
td {
  padding-right: var(--table-padding);
}

tr::after {
  content: "|";
  font-weight: normal;
}

/*
 * tbodyの最初の行だけ左右の罫線を2本にする
 */
tbody tr:first-child td::before,
tbody tr:first-child::after {
  content: "|\A|";
  white-space: pre;
}

/*
 * theadとtbodyの間の仕切り
 */
th {
  position: relative;
}

th::after {
  content: "-----------------------------------------------------------------";
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  position: absolute;
  letter-spacing: 0.1em;
  font-weight: normal;
  top: 100%;
  left: calc(var(--line-char-width) + var(--table-padding));
  right: var(--line-char-width);
}