角丸テーブルのスタイル指定

時々使うテーブルの角丸仕様、毎回調べてる気がする。。

ポイントはborder-collapse
border-collapse: collapse;ではなくborder-collapse: separate;を指定します

出来上がり

このような感じで角丸テーブルができます。
カラーや幅指定は任意で追加してください

まずはtable作成

<table class="radius_table">
  <tbody>
    <tr>
      <th>見出し(th)</th>
      <td>内容(td)</td>
    </tr>
    <tr>
      <th>見出し(th)</th>
      <td>内容(td)</td>
    </tr>
    <tr>
      <th>見出し(th)</th>
      <td>内容(td)</td>
    </tr>
    <tr>
      <th>見出し(th)</th>
      <td>内容(td)</td>
    </tr>
    <tr>
      <th>見出し(th)</th>
      <td>内容(td)</td>
    </tr>
  </tbody>
</table>

作成したtableにスタイルを追加します

 .radius_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  border: 2px solid #ffd783;
}

.radius_table th {
  padding: 10px;
  background: #ffd783;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  font-weight: bold;
  text-align: center;
}

.radius_table td {
  padding: 10px;
  border-right: 1px solid #ffd783;
  border-bottom: 1px solid #ffd783;
}

.radius_table td:last-child,
.radius_table th:last-child {
  border-right: none;
}

.radius_table tr:first-child>*:first-child {
  border-radius: 6px 0 0 0;
  border-left: 1px solid #ffd783;
}


.radius_table tr:first-child>*:last-child {
  border-radius: 0 6px 0 0;
  border-right: none;
}

.radius_table tr:last-child>* {
  border-bottom: none;
}

.radius_table tr:last-child>*:first-child {
  border-radius: 0 0 0 6px;
}

.radius_table tr:last-child>*:last-child {
  border-radius: 0 0 6px 0;
  border-right: none;
}