Webサイト制作

投稿日:

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

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

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

まずは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;
}

出来上がり

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

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

- Webサイト制作
-

関連記事

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。例えば、このサイトのレイアウト。クロームで見るとこんな感じまぁまぁ均等に並んでいるように見 ...

-webkit-とかのベンダープレフィックスをつける重要性

プレフィックスとは、CSS3を使う際に使用するプロパティの前につけるキーワードです。 サイト制作者には当たり前に思えるベンダープレフィックス。 今までどうしてこれを付けないといけないかがよく分かってい ...

簡単な背景画像のパララックス

jquaryをリンクさせる htmlファイルでsection毎に背景画像を設定 cssにて。 width:100%; background:url()center center no-repeat f ...

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

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

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 jQueryで無限ループスライダー 無限 ...