テーブル(table)に角丸(radius)を設定する方法

解決済

質問者：kazuking115
質問日時：2019/12/17 07:33
回答数：3件

現状のCSSでは角丸（radius）が設定できません。

調べてみると.「border-collapse: collapse;」のままでは反映されないとのこと。
「separate」に変更して試行錯誤してみたのですが、デザインが今と異なってしまうテーブルになってしまいました。

デザインは今とまったく同じで、角丸を実現したいのですが、どのように変更すればよいでしょうか？
ご存知の方いらっしゃいましたら、ご教示ください。
よろしくお願いします。

simple_t{
width: 90%;
border-collapse: collapse;
color:#3f3f3f;
font-size: 15px;
margin:20px auto;
}
.simple_t th {
border: #e3e3e3 1px solid;
background: #454545;
color: #ffffff;
height:45px;
padding: 0 5px;
}
.simple_t td {
border: #e3e3e3 1px solid;
text-align: right;
padding: 7px;
padding-left: 10px;
background: #f5f5f5;
}

こんにちは。
回答ありがとうございます。
角丸にしたいのはテーブルの四隅です。
よろしくお願いします。

No.1の回答に寄せられた補足コメントです。補足日時：2019/12/17 09:55
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2019/12/17 11:36

No1です

＞角丸にしたいのはテーブルの四隅です。
テーブル全体の四隅ということですね。勘違いしました。
それなら、全体を角丸にして、四隅のセルの該当する角だけを角丸にすればよさそうですね。
方法としてはNo1にそのままを付け足した形ですが、No2様の回答と角丸の部分は同様です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
.simple_2{
width: 90%;
border-collapse: separate;
border-spacing: 1px;
color:#3f3f3f;
font-size: 15px;
margin:20px auto;
background-color: #e3e3e3;
border-radius: 8px;
}
.simple_2 th {
background: #454545;
color: #ffffff;
height:45px;
padding: 0 5px;
}
.simple_2 td {
text-align: right;
padding: 7px;
padding-left: 10px;
background: #f5f5f5;
}
.simple_2 th:first-child{border-top-left-radius: 8px;}
.simple_2 th:last-child{border-top-right-radius: 8px;}
.simple_2 tr:last-child td:first-child{border-bottom-left-radius: 8px;}
.simple_2 tr:last-child td:last-child{border-bottom-right-radius: 8px;}

</style>

</head>
<body>
<table class="simple_2">
<caption>参考案</caption>
<thead>
<tr><th>t-1</th><th>t-2</th><th>t-3</th></tr>
</thead>
<tbody>
<tr><td>b-11</td><td>b-12</td><td>b-13</td></tr>
<tr><td>b-21</td><td>b-22</td><td>b-33</td></tr>
<tr><td>b-31</td><td>b-32</td><td>b-33</td></tr>
</tbody>
</table>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： Ogre7077
回答日時：2019/12/17 10:42

既存のデザインを変更せず、表全体を四隅角丸にするデザインを追加する例です

.simple_t.rounded { border-collapse:separate; border-spacing:0px; }
.simple_t.rounded tr > * { border-width:1px 0 0 1px; }
.simple_t.rounded tr > *:last-child { border-right-width:1px; }
.simple_t.rounded tr:last-child > * { border-bottom-width:1px; }
.simple_t.rounded tr:first-child > *:first-child { border-top-left-radius:1ex; }
.simple_t.rounded tr:first-child > *:last-child { border-top-right-radius:1ex; }
.simple_t.rounded tr:last-child > *:last-child { border-bottom-right-radius:1ex; }
.simple_t.rounded tr:last-child > *:first-child { border-bottom-left-radius:1ex; }

ポイントとしては
* collapse が使えないので、隣り合う罫線が重複しないように調整
* 罫線を含めて角丸にするため、四隅の欄だけを個別に角丸指定
* thead や tfoot の使用状況によってセレクタ見直しが必要

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2019/12/17 09:23

こんにちは

＞デザインは今とまったく同じで、角丸を実現したいのですが
角丸にするとデザインは今とは変わると思いますけれど…(笑)

HTMLがわからないけれど、適当に想定。
ボーダーを表示しているので、その幅をcellのspacingとして利用すれば良いのでは？
ボーダー無しでspacing無しの場合は、td内に要素を作成してそちらで角丸にすれば宜しいかと。
とりあえず、前者の方法でも良さそうなので、こんなのではいかがでしょうか？

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
.simple_t{
width: 90%;
border-collapse: collapse;
color:#3f3f3f;
font-size: 15px;
margin:20px auto;
}
.simple_t th {
border: #e3e3e3 1px solid;
background: #454545;
color: #ffffff;
height:45px;
padding: 0 5px;
}
.simple_t td {
border: #e3e3e3 1px solid;
text-align: right;
padding: 7px;
padding-left: 10px;
background: #f5f5f5;
}

.simple_2{
width: 90%;
border-collapse: separate;
border-spacing: 1px;
color:#3f3f3f;
font-size: 15px;
margin:20px auto;
background-color: #e3e3e3;
}
.simple_2 th {
background: #454545;
color: #ffffff;
height:45px;
padding: 0 5px;
}
.simple_2 td {
text-align: right;
padding: 7px;
padding-left: 10px;
background: #f5f5f5;
}
.simple_2 th, .simple_2 td{
border-radius: 8px;
}
</style>

</head>
<body>
<table class="simple_t">
<caption>質問文のテーブル？</caption>
<thead>
<tr><th>t-1</th><th>t-2</th><th>t-3</th></tr>
</thead>
<tbody>
<tr><td>b-11</td><td>b-12</td><td>b-13</td></tr>
<tr><td>b-21</td><td>b-22</td><td>b-33</td></tr>
<tr><td>b-31</td><td>b-32</td><td>b-33</td></tr>
</tbody>
</table>

<table class="simple_2">
<caption>参考案</caption>
<thead>
<tr><th>t-1</th><th>t-2</th><th>t-3</th></tr>
</thead>
<tbody>
<tr><td>b-11</td><td>b-12</td><td>b-13</td></tr>
<tr><td>b-21</td><td>b-22</td><td>b-33</td></tr>
<tr><td>b-31</td><td>b-32</td><td>b-33</td></tr>
</tbody>
</table>
</body>
</html>