• コミュニティ

  ランキングを入れた比較表に見出し列を表示させたい

  トピックス by widget初心者 1792 pt  2023年9月20日 10:56 181 PV

  【Widget名】

  ランキングを入れた比較表、左見出し無し（表）

  https://sb-draft-preview.squadbeyond.com/articles/eKPf_WsrS-ZTKUzRBfRA/draft?token=05dc24d946fd6a64df2f1a039466b355

  【修正したいこと】

  ランキングを入れた比較表に参考画像のように各項目名の見出し（列）が追加で表示されるように修正したいです。

  【参考画像】https://drive.google.com/file/d/1fvucyEV905bEc5DY4Gf1Jy753vwyvhgJ/view

  widgetマスター   1 年, 2 月前 2 人 · 1 コメント

  • widget
  • ランキングを入れた比較表、左見出し無し（表）
  • 表
• 1 コメント

• 

  widgetマスター

  モデレータ

  2023年9月20日 14:30

  見出し列を追加するには、HTMLとCSSを以下のように修正してください。

  修正後のイメージはこちらです

  ▼https://sb-draft-preview.squadbeyond.com/articles/KmOgQBbelwwwWSIQ/draft?token=9e57f99e6d620cabfd884670aa70d1a1

  ▪️HTML

  基本的にtrタグ（not閉じtrタグ）の下にthタグを入れていただければ、見出しの1マスを作成できます。各行に同じマスがないと崩れることに注意してください。

  【修正前】

      <table class="table">
          <thead>
              <tr><!-- テーブル内の列を増やす場合は、すべての行のth要素とtd要素を同じ数だけ増やしてください -->
                  <th class="medal"><img src ~~~
  <div class="tbl-3col__ranking">
  〜〜
  <tr>
  <td>
  <p class="c-review__ttl">見出し</p>
  <p class="c-review__cont"><span class="c-cont__text">内容</span></p>
  <p class="c-review__subtext">サブテキスト</p>
  </td>
  〜〜

  【修正後】

  ① 最初の<tr> の後に、<th class=”none”></th> を追加します

  ② 以下7箇所の<tr> の後に、それぞれ<th>項目名</th> を追加します

  <div class="tbl-3col__ranking">
      <table class="table">
          <thead>
              <tr><!-- テーブル内の列を増やす場合は、すべての行のth要素とtd要素を同じ数だけ増やしてください -->
  <th class="none"></th> /*追加*/
                     <th class="medal"><img src ~~~
  〜〜
  <tr>
  <th>項目名</th> /*追加　以下7箇所の<tr> の後に、それぞれ<th>項目名</th> を追加してください*/　
  <td>
  <p class="c-review__ttl">見出し</p>
  <p class="c-review__cont"><span class="c-cont__text">内容</span></p>
  <p class="c-review__subtext">サブテキスト</p>
  </td>
  〜〜

  ▪️ CSS

  【修正前】

   .tbl-3col__ranking .table {
    width: 100%;
    margin: 0 auto;
    border-top: 1px solid #ccc;　変更
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    box-sizing: border-box;
  }
   .tbl-3col__ranking .table th,
   .tbl-3col__ranking .table td {
    width: 33.33%;
    min-width: 96px;
    text-align: center;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;　変更
    border-bottom: 1px solid #d9d9d9;　
    border-top: none;　一行消す
    padding: 12px;
    vertical-align: middle;
    box-sizing: border-box;
  }

  【修正後】

  .tbl-3col__ranking .table {
    width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid #ccc; 変更
    border-right: 1px solid #d9d9d9;　一行追加
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    box-sizing: border-box;
  }
   .tbl-3col__ranking .table th,
   .tbl-3col__ranking .table td {
    width: 33.33%;
    min-width: 96px;
    text-align: center;
    border-left: 1px solid #d9d9d9;
    border-top: 1px solid #d9d9d9;　変更
    border-bottom: 1px solid #d9d9d9;
    padding: 12px;
    vertical-align: middle;
    box-sizing: border-box;
  }
  /*以下追加*/
  .tbl-3col__ranking .table th.none {
    border-left: none;
    border-top: none;
  }

Log In to Reply