cssカスタマイズ

シンプルなテーブルで一番上と一番下の線を非表示

ワードプレスデフォルトのテーブルは、いまいち好きではないので、表の下線だけのシンプルな区切りの表。最上部最下部の線があると、他の線と重複したりして邪魔なので、このCSSでは非表示にしている。

HTML

<table class="underline-table">
  <tr><td>左1</td><td>右1</td></tr>
  <tr><td>左2</td><td>右2</td></tr>
  <tr><td>左3</td><td>右3</td></tr>
  <tr><td>左4</td><td>右4</td></tr>
  <tr><td>左5</td><td>右5</td></tr>
</table>

CSS

.underline-table {
  width: 100%;
  border-collapse: collapse;
  border-top: none; /* ← テーブル全体の上線を明示的に消す */
}

.underline-table td {
  border-bottom: 1px solid #f0eee8;
  padding: 12px 6px;
  border-top: none; /* 念のため明示しておく */
}

/* 最初の行の上線を完全に無効化 */
.underline-table tr:first-child td {
  border-top: none !important;
}

/* 最後の行の下線を非表示に */
.underline-table tr:last-child td {
  border-bottom: none;
}

/* 左6%、右94%の幅指定 */
.underline-table td:first-child {
  width: 6%;
}

.underline-table td:last-child {
  width: 94%;
}