Webサイト制作

投稿日:2024年5月17日 更新日:

角丸テーブルのスタイル指定

時々使うテーブルの角丸仕様、毎回調べてる気がする。。

ポイントはborder-collapse
border-collapse: collapse;ではなくborder-collapse: separate;を指定します

出来上がり

このような感じで角丸テーブルができます。
カラーや幅指定は任意で追加してください

見出し(th) 内容(td)
見出し(th) 内容(td)
見出し(th) 内容(td)
見出し(th) 内容(td)
見出し(th) 内容(td)

まずはtable作成

<table class="radius_table">
  <tbody>
    <tr>
      <th>見出し(th)</th>
      <td>内容(td)</td>
    </tr>
    <tr>
      <th>見出し(th)</th>
      <td>内容(td)</td>
    </tr>
    <tr>
      <th>見出し(th)</th>
      <td>内容(td)</td>
    </tr>
    <tr>
      <th>見出し(th)</th>
      <td>内容(td)</td>
    </tr>
    <tr>
      <th>見出し(th)</th>
      <td>内容(td)</td>
    </tr>
  </tbody>
</table>

作成したtableにスタイルを追加します

 .radius_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  border: 2px solid #ffd783;
}

.radius_table th {
  padding: 10px;
  background: #ffd783;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  font-weight: bold;
  text-align: center;
}

.radius_table td {
  padding: 10px;
  border-right: 1px solid #ffd783;
  border-bottom: 1px solid #ffd783;
}

.radius_table td:last-child,
.radius_table th:last-child {
  border-right: none;
}

.radius_table tr:first-child>*:first-child {
  border-radius: 6px 0 0 0;
  border-left: 1px solid #ffd783;
}


.radius_table tr:first-child>*:last-child {
  border-radius: 0 6px 0 0;
  border-right: none;
}

.radius_table tr:last-child>* {
  border-bottom: none;
}

.radius_table tr:last-child>*:first-child {
  border-radius: 0 0 0 6px;
}

.radius_table tr:last-child>*:last-child {
  border-radius: 0 0 6px 0;
  border-right: none;
}

- Webサイト制作
-

関連記事

拡大してもボヤけない、アイコンフォントが便利すぎる

サイト作成の時にメニューアイコンを作っていたけど 3つのメニューのうち1つをアイコンフォント使ってたら表示の鮮明さに驚いた。 他のアイコンはpng形式の画像だったけど全然違う。 通常、画像でできたアイ ...

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 まずはhtml 一般的な入れ子構造のリストです。 <heade ...

"Swiper"を使ったスライドで左右に画像を表示する

JQueryなしで動く"Swiper"という便利なプラグインを使ってのスライドショー。 左右に画像を表示したい時の注意点をメモ。 ダウンロードはこちらから swiper公式サイト 使う中ですごく分かり ...

cssでlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 まずはHTMLでメニュー作成 普通にリストで作成 ...

no image

Video要素の縦横比を変更する

やりたいこと Videoファイルが横長で見にくいので縦幅を調整したい 原因 Video要素のobject-fitがデフォルトでcontainになっている。 object-fit:fill;を指定してあ ...