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%;
}