[CSS]テーブルの行全体(tr)をリンクにする

2024.1.22

asami-furuta

テーブル(table)に複数のセル(td)があるとき、行全体(tr)をクリックできるリンクにしたいとき、HTML+CSSのみで実装する方法です。

INDEX

テーブルの行全体をリンクにする

デモはこちらです。

See the Pen [CSS]テーブルの行全体をリンクにする by asamifuruta (@asamih5) on CodePen.

HTML

<table>
  <thead>
    <tr>
      <th>種類</th>
      <th>値段</th>
      <th>購入日</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>150円</td>
      <td>2023-01-01</td>
      <td>
        <a href="#">詳細</a>
      </td>
    </tr>
    <tr>
      <td>みかん</td>
      <td>300円</td>
      <td>2023-02-01</td>
      <td>
        <a href="#">詳細</a>
      </td>
    </tr>
    <tr>
      <td>いちご</td>
      <td>400円</td>
      <td>2023-01-01</td>
      <td>
        <a href="#">詳細</a>
      </td>
    </tr>
    <tr>
      <td>もも</td>
      <td>500円</td>
      <td>2023-01-01</td>
      <td>
        <a href="#">詳細</a>
      </td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
}
tr {
  position: relative;
  border-color: #ccc;
  border-style: solid;
  border-width: 1px 0;
}
th {
  text-align: left;
  padding: 1rem;
}
td {
  padding: 1rem;
}
td a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  padding: 0 1.5rem;
  text-decoration: none;
  color: #1b54b4;
  font-weight: 700;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  box-sizing: border-box;
}
td a:hover {
  background-color: rgba(192, 196, 198, 0.2);
  opacity: .8;
}