WEB広告運用の困りごとが集まる場所 コミュニティ コミュニティ ランキングを入れた比較表に見出し列を表示させたい 返信先:ランキングを入れた比較表に見出し列を表示させたい

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