HTMLのtable(テーブル)タグを角丸にする方法をご紹介します。
table(テーブル)タグはborder-spacingやborder-collapseのせいで角丸(border-radius)が適用されないケースがあったのでその指定を調整して適用される様にします。
角丸にする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>
HTMLテーブル(table)タグを角丸にするデモページ
HTMLテーブル(table)タグを角丸にするデモページ
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告