CSS3で装飾　三角矢印つきテーブル

作成日 2020.12.08
CSS
CSS3

CSS3で見出しに三角矢印を装飾したテーブルの簡単なサンプルコードを記述しています。

1. 環境
2. 三角矢印つきテーブル
3. サンプルコード

環境

OS windows10 64bit
chrome 86.0.4240.198

三角矢印つきテーブル

三角矢印は見出し(th)の:after擬似要素で表現します。

/*ヘッダー部分*/
table th{
  position: relative;
  background-color: #39b60a;
  color: white;
  text-align: center;
  padding: 10px 0;
}

/*ヘッダーの:after議事要素*/
table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #39b60a;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

サンプルコード

以下は、見出しに三角矢印をつけたテーブルのサンプルコードとなります。

<style>
table{
  width: 100%;
  border-collapse: collapse;
  font-size:0.8rem;
}

table tr{
  border-bottom: solid 10px white;
}

table tr:last-child{
  border-bottom: none;
}

table th{
  position: relative;
  background-color: #39b60a;
  color: white;
  text-align: center;
  padding: 10px 0;
}

table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #39b60a;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

table td{
  text-align: left;
  background-color: #eee;
  padding: 10px 0 10px 20px;
}
</style>

<table>
  <tr>
    <th>サイト名</th>
    <td>mebee</td>
  </tr>
  <tr>
    <th>サイトURL</th>
    <td>https://mebee.info</td>
  </tr>
  <tr>
    <th>サイトの目的</th>
    <td>システム作業の備忘録です。役に立つことがあれば幸いです</td>
  </tr>
</table>

ブラウザ上で表示した結果