table(テーブル)タグを角丸にする方法【HTML】｜DAD UNION

HTMLのtable(テーブル)タグを角丸にする方法をご紹介します。
table(テーブル)タグはborder-spacingやborder-collapseのせいで角丸（border-radius）が適用されないケースがあったのでその指定を調整して適用される様にします。

Contents

角丸にするtable(テーブル)のCSS記述
角丸にするtable(テーブル)タグのHTML記述
HTMLテーブル(table)タグを角丸にするデモページ

角丸にするtable(テーブル)のCSS記述

※tableタグに「border-spacing: 0;」「border-collapse: separate;」「overflow: hidden;」と「border-radius: 14px;」を指定します。

<style type="text/css">
body{
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  padding: 0;
  margin: 0;
  font-size: 24px;
  text-align: center;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0 0 0;
  font-size: 24px;
}
table{
  width: 600px;
  border-spacing: 0;
  border-collapse: separate;
  border: solid 1px #989898;
  border-radius: 14px;
  overflow: hidden;
  background-color: #DADADA;
  margin: 0 auto;
}
table th{
  width: 30%;
  color: #555555;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  line-height: 1.8em;
  padding: 12px 20px;
  border-bottom: solid 1px #989898;
  vertical-align: top;
}
table td{
  width: 70%;
  color: #555555;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  line-height: 1.8em;
  padding: 12px 20px;
  border-left: solid 1px #989898;
  border-bottom: solid 1px #989898;
}
table tr:last-child th,
table tr:last-child td{
  border-bottom: none;
  overflow: hidden;
}
</style>

角丸にするtable(テーブル)タグのHTML記述

※角丸にするtable(テーブル)タグを用意します。必要に応じて変更して下さい。

<h1>HTMLテーブル(table)タグの角丸表示</h1>


      <table cellpadding="0" cellspacing="0">
        <tr>
          <th>thタグ1</th>
          <td>tdタグテキスト1tdタグテキスト1tdタグテキスト1tdタグテキスト1tdタグテキスト1tdタグテキスト1</td>
        </tr>
        <tr>
          <th>thタグ2</th>
          <td>tdタグテキスト2tdタグテキスト2tdタグテキスト2tdタグテキスト2tdタグテキスト2tdタグテキスト2</td>
        </tr>
        <tr>
          <th>thタグ3</th>
          <td>tdタグテキスト3tdタグテキスト3tdタグテキスト3tdタグテキスト3tdタグテキスト3tdタグテキスト3</td>
        </tr>
        <tr>
          <th>thタグ4</th>
          <td>tdタグテキスト4tdタグテキスト4tdタグテキスト4tdタグテキスト4tdタグテキスト4tdタグテキスト4</td>
        </tr>
        <tr>
          <th>thタグ5</th>
          <td>tdタグテキスト5tdタグテキスト5tdタグテキスト5tdタグテキスト5tdタグテキスト5tdタグテキスト5</td>
        </tr>
      </table>