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サイト制作
-

関連記事

tableのwidth幅指定のメモ

サイト制作している時、 時々テーブルを使うけどIEやfirefoxでwidth指定がきかなかったので対応のメモ。 thやtdに対して幅を指定する場合 Chromeならcalc();が使えるけど、IEで ...

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか?私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてしま ...

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか?私は結構あります。で、ジェネ ...

Product Advertising APIで商品情報を取得してみる

ノンプログラマーがProduct Advertising APIでの商品情報取得にチャレンジしました。 検索しても情報が少なく苦労したので、同じような方の参考になればと思います。 目次1 amazon ...

no image

クリック開閉のタグ[jQuery+css使用]

jQuery+cssを使用したクリック開閉のタグ。 簡単に設置できるのでお世話になっています。 jQueryのタグ <script> jQuery(function($){ $('.box ...