HTMLテーブルを1px線で描き、外枠の色だけを変えたい

発生している問題

HTMLテーブルで、線の太さを1pxに統一して外枠線の色だけを変えたレイアウトを作成したいと思っています。
それを意図したhtmlを記述しましたが、結果は以下の画像のような表示になってしいます。

html
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5table {
6  border: solid 1px red;
7  border-collapse :collapse;
8}
9table td {
10  border: solid 1px gray;
11}
12</style>
13</head>
14<body>
15
16<table>
17  <tr><td>hoge</td><td>hogehoge</td></tr>
18  <tr><td>fuga</td><td>fugafuga</td></tr>
19</table>
20
21</html>

原因

原因は判明しています。
border-collapse :collapse;で重なった線には「ボーダースタイルの色のみが異なる場合は、セルの線はテーブルの線より優先される」という仕様があるからです。
参考リンク：W3C Tables

質問

調査した範囲では線の描画優先度を変化させる方法は見つかりませんでした。
もちろんテーブル外枠に隣接するtdタグすべてに個別でborderスタイルを設定すれば外枠線の色だけを変えることは可能ですが、目的とする表示をもっと単純なコードによって実現できる方法があれば教えてください。

行動規範の内容に同意します

回答2件

以下のように、tableのborderをsolidからdoubleに変えてみてはどうでしょう？

CSS
1table {
2/*border: solid 1px red;*/
3  border: double 1px red;
4  border-collapse :collapse;
5}
6table td {
7  border: solid 1px gray;
8}

投稿2021/06/23 12:23

root_jp

総合スコア4666

ku__ra__ge

2021/06/24 10:48

回答ありがとうございます。太さが1pxの線はdoubleとsolidで同じ表示になることを利用しているのですね。勉強になりました。

行動規範の内容に同意します

ベストアンサー

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border: solid 1px red;
  border-collapse:collapse;
}
table td {
  border: solid 1px gray;
}

table td:first-child {
    border-left: none;
}
table td:last-child {
    border-right: none;
}
table tr:first-child > td, table tr:first-child > th {
    border-top: none;
}
table tr:last-child > td, table tr:last-child > th {
    border-bottom: none;
}
</style>
</head>
<body>

<table id="test">
  <tr><td>hoge</td><td>hogehoge</td></tr>
  <tr><td>fuga</td><td>fugafuga</td></tr>
  <tr><td>piyo</td><td>piyopiyo</td></tr>
</table>

</html>

外周と接するtdタグのborderを上書きしてみました。
正直あまりスマートとは言えない気がしますが。。。

投稿2021/06/23 14:06