Home>

Comparison table of the following images, 3 products are currently on the smartphone display,
I want to add up to 5 products and make the horizontal scroll without changing the height of the table.
(We have posted a new post because there was progress in the previous question.)

Reference site
The above reference site is exactly what I want to do, so I think it is easy to understand.
I want to be able to scroll the table horizontally on my smartphone.

The code was added to index.php and style.css according to the above reference site.
As a test, I tried putting the code of the reference site as it was.
(For code, see "Trying" at the bottom)

Error message

As shown in the image below, the table fits in the screen width and cannot be scrolled.
Also, the column width has become smaller.

The table of the reference site (table such as "Web Consulting" at the bottom of the image) has been scrolled normally.
It may be that something is stuck in the css of my original table.
Because I am a web beginner, I am in trouble without knowing the cause. .

Tried

The following code has been added to style.css.

.hikakuhyo-body {padding: 0 15px;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

The code on the reference site was also included for testing.

.table_container {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

Style.css after addition

.hikakuhyo {margin-bottom: 40px;}
.hikakuhyo h2 {text-align: center;}

@media screen and (min-width: 768px) {
  .hikakuhyo-body {
    background-image: url (images/hikakuhyo_top_pc_2.jpg);
    background-repeat: no-repeat;
    height: 486px;
  }
  .hikakuhyo-body2 {
    background-image: url (images/hikakuhyo_ranking_top_pc_2.jpg);
    background-repeat: no-repeat;
    height: 501px;
  }
}
@media screen and (max-width: 767px) {
  .hikakuhyo {margin-bottom: 20px;}
  .hikakuhyo h2 {
    padding: 0 15px;
    margin: 0 auto 10px auto;
  }
  .hikakuhyo h2 img {max-width: 291px;}
  .hikakuhyo-body {padding: 0 10px;}
  .hikakuhyo-body2 {padding: 0 10px;}}
@media screen and (min-width: 768px) {
  .hikakuhyo-bottom {
    background-image: url (images/hikakuhyo_bottom_pc.png);
    background-repeat: no-repeat;
    height: 69px;
  }
  .hikakuhyo-body ul,
  .hikakuhyo-bottom ul {
      display: table;
      table-layout: fixed;
      width: 650px;
      margin: 0 0 0 130px;
      padding: 6px 0 0 0;
  }
  .hikakuhyo-body2 ul,
  .hikakuhyo-bottom ul {
      display: table;
      table-layout: fixed;
      width: 650px;
      margin: 0 0 0 130px;
      padding: 6px 0 0 0;
  }
  body.page-id-74 .hikakuhyo-body ul {padding: 28px 0 0 0;}
  .hikakuhyo-body ul li,
  .hikakuhyo-bottom ul li {
    display: table-cell;
    text-align: center;
  }
  .hikakuhyo-body2 ul {padding: 28px 0 0 0;}
  .hikakuhyo-body2 ul li,
  .hikakuhyo-bottom ul li {
    display: table-cell;
    text-align: center;
  }
  .hikakuhyo-body ul li img,
  .hikakuhyo-bottom ul li img {width: 120px;}
  .hikakuhyo-body2 ul li img,
  .hikakuhyo-bottom ul li img {width: 120px;}

}

@media screen and (max-width: 767px) {
  .hikakuhyo-body {padding: 0 15px;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
  .hikakuhyo-body table {
      border-left: 1px solid # d5c4a9;
      border-top: 1px solid # d5c4a9;
  }
  .hikakuhyo-body th,
  .hikakuhyo-body td {
      border-right: 1px solid # d5c4a9;
      border-bottom: 1px solid # d5c4a9;text-align: center;
      padding: 10px 5px;
      width: 25%;
  }
  .hikakuhyo-body th {
      font-size: 1.2rem;
      line-height: 1.4;
      background-color: # f8f2ec;
  }
  .hikakuhyo-body th.product-img {
      font-size: 1.0rem;
      background-color: #fff;
      color: # a68349;
      vertical-align: top;
      padding: 5px;
  }
  .hikakuhyo-body th.product-img img {
      display: block;
      margin: 0 auto;
  }
  .hikakuhyo-body th.product-img img.ranking-icon {
      width: 28px;
      margin-bottom: 4px;
  }
  .hikakuhyo-body td.btn-more {padding: 8px 5px 5px 5px;}
  .hikakuhyo-body td strong {color: # ed1e79;/* Pink * /}
  .hikakuhyo-body td small {font-size: 1.0rem;}
}
.table_container {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

index.php

<!-▽▽▽ Comparison table ▽▽▽->
      <div>
        <? php if (is_mobile ()): // Display only access from smartphone?>

          <div>
            <table>
              <tr>
                <th> </th>
               <th><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/calobyeplus_product_s.png" alt = "Caloba Plus">Caloba Plus</a></th>
                <th><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/suppon_product_s.png" alt = "Higo Supo Moromi Vinegar">Higo Supo Moromi Vine</a&gt ;</th>
                <th><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/lakubi_product_s.png" alt = "Rakubi LAKUBI">Rakubi LAKUBI</a></th&gt ;
                <th><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/lakubi_product_s.png" alt = "Rakubi LAKUBI">Rakubi LAKUBI</a></th&gt ;
                <th><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/lakubi_product_s.png" alt = "Rakubi LAKUBI">Rakubi LAKUBI</a></th&gt ;
                <th><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/lakubi_product_s.png" alt = "Rakubi LAKUBI">Rakubi LAKUBI</a></th&gt ;
              </tr>
              <tr>
                <th>"User ratings</th>
                <td><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_otona_point.png" alt = "98 points"></td>
                <td><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_surattokiriri_point.png" alt = "92 points"></td>
                <td><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_kokorokaradaanshinyousan_point.png" alt = "90 points"></td>
                <td><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_kokorokaradaanshinyousan_point.png" alt = "90 points"></td>
                <td><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_kokorokaradaanshinyousan_point.png" alt = "90 points"></td><td><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_kokorokaradaanshinyousan_point.png" alt = "90 points"></td>
    </tr>
    <tr>
      <th>Full Money Back Guarantee</th>
      <td><strong>Yes</strong></td>
      <td>None</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
    </tr>
    <tr>
      <th>Price</th>
      <td><strong>500yen</strong></td>
      <td>2,740yen</td>
      <td>1,000yen</td>
      <td>1,000yen</td>
      <td>1,000yen</td>
      <td>1,000yen</td>
    </tr>
    <tr>
      <th>Price per day</th>
      <td><strong>17yen</strong></td>
      <td>88yen</td>
      <td>33yen</td>
      <td>33yen</td>
      <td>1,000yen</td>
      <td>1,000yen</td>
    </tr>
    <tr>
      <th>Recommendation</th>
      <td><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_otona_star.png" alt = "5"></td>
      <td><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_surusuru_star.png" alt = "4"></td>
      <td><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_komachi_star.png" alt = "3"></td>
      <td><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_komachi_star.png" alt = "3"></td>
      <td><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_komachi_star.png" alt = "3"></td>
      <td><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_komachi_star.png" alt = "3"></td>
    </tr>
    <tr>
      <th>Learn more</th>
      <td><a href = "https://calobyeplus.jp"><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_btn_more_sp.png" alt = "Go to official website"></a></td>
      <td><a href = "https://yu-me-ya.com/sp/items/higo-suppon"><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_btn_more_sp.png "alt =" Go to official site "></a></td>
      <td><a href = "https://www.uu-kan.jp/item/01/lb/"><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_btn_more_sp.png "alt =" Go to official site "></a></td>
      <td><a href = "https://www.uu-kan.jp/item/01/lb/"><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_btn_more_sp.png "alt =" Go to official site "></a></td>
      <td><a href = "https://www.uu-kan.jp/item/01/lb/"><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_btn_more_sp.png "alt =" Go to official site "></a></td>
      <td><a href = "https://www.uu-kan.jp/item/01/lb/"><img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/hikakuhyo_btn_more_sp.png "alt =" Go to official site "></a></td>
    </tr>
  </table>
</div><!-.hikakuhyo-body->
Supplemental information (FW/tool version etc.)
.hikakuhyo-body td {width: 25%;}


I thought this was the column width, but only the first column was reflected. .

Thanks for your valuable time.
I don't understand the code well and I'm stuck. .
Please tell us if you need any other information. Thank you.

  • Answer # 1

    It has nothing to do with the subject, but I added it because there was no start tag for a tag
    If you adjust the indentation, it is obvious, but if you are not using an editor for web production, you will be warned by Lint, so use that. Or search for validators on the web (cf. Reference answer)
    (Well, you can usually see in the text color that there is no link other than the upper left in the sketch image alone.)

    <! DOCTYPE html>
    <html>
    <head>
    <title>demo</title>
    </head>
    <body>
      <!-▽▽▽ Comparison table ▽▽▽->
      <div>
        <div>
          <table>
            <tr>
              <th>&nbsp;</th>
              <th>
                  <img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/calobyeplus_product_s.png" alt = "Caloba Plus">
                  Caloby Plus
                </a>
              </th>
              <th>
                <a><!-← ← missing start tag->
                  <img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/suppon_product_s.png" alt = "Higo Supo Moromi Vinegar">
                  Higo Sapporo Moromi Vinegar
                </a>
              </th>
              <th>
                <a><!-← ← missing start tag->
                  <img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/lakubi_product_s.png" alt = "Rakubi LAKUBI">
                  Rakubi LAKUBI
              </a>
              </th>
              <th>
                <a><!-← ← missing start tag->
                  <img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/lakubi_product_s.png" alt = "Rakubi LAKUBI">
                  Rakubi LAKUBI
                </a>
              </th>
              <th>
                <a><!-← ← missing start tag->
                  <img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/lakubi_product_s.png" alt = "Rakubi LAKUBI">
                  Rakubi LAKUBI
                </a>
              </th>
              <th>
                <a><!-← ← missing start tag->
                  <img src = "<? php echo esc_url (get_template_directory_uri ());?>/images/lakubi_product_s.png" alt = "Rakubi LAKUBI">
                  Rakubi LAKUBI
                </a>
              </th>
            </tr>
            <tr><th>"User ratings</th>
              <!-Omitted to limit the number of characters->
            </tr>
            <tr>
              <th>Full Money Back Guarantee</th>
              <!-Omitted to limit the number of characters->
            </tr>
            <tr>
              <th>Price</th>
              <!-Omitted to limit the number of characters->
            </tr>
            <tr>
              <th>Price per day</th>
              <!-Omitted to limit the number of characters->
            </tr>
            <tr>
              <th>Recommendation</th>
              <!-Omitted to limit the number of characters->
            </tr>
            <tr>
              <th>Learn more</th>
              <!-Omitted to limit the number of characters->
              </td>
            </tr>
          </table>
        </div><!-.hikakuhyo-body->
      </div><!-← End tag missing->
    </body>
    </html>

    After adding the added CSS, do you understand it?

    .hikakuhyo-body {
      padding: 0 15px;/* Inner margin setting * /
      width: 100%;/* Set the width of the element * /
      overflow: auto;/* Control the behavior of the scroll bar * /
      -webkit-overflow-scrolling: touch;/* safari only: smooth scrolling? * /
    }


    -webkit-overflow-scrolling

      


      via -webkit-overflow-scrolling | MDN

    Looks like "Do not use it on production sites facing the Web", so you can almost ignore it

    As you can see, there was no CSS in the added CSS thatpinsthe elements after all

    Main topic

    I made a demo because it was difficult to confirm if it was posted code
    https://thimbleprojects.org/liveasnotes/535364/

    You can see the chord from the remix button in the upper right

    Pattern 1

    Normally usesposition: sticky;

    CSS position: sticky is very useful

    Introduction of CSS "position: sticky" and polyfill "sticky-state" to fix/release elements according to scroll (de-jQuery)

    However, since the implementation status is not good enough, as in the second article, the power of the script is necessary for a while
    https://caniuse.com/#search=sticky

    Pattern 2

    At the questioner's level, you may not immediately know what you are doing because there are too many combinations, but Pattern 2 is implemented like this.

    <div>
      <table>
        <tr>
          <th data-cont = "\">\</th>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
          <th>E</th>
          <th>F</th>
        </tr>
        <tr>
          <td data-cont = "Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</td>
          <td>O</td>
          <td>O</td>
          <td>-</td>
          <td>X</td>
          <td>O</td>
          <td>X</td>
        </tr>
        <tr>
          <td data-cont = "consectetur adipiscing elit">consectetur adipiscing elit</td>
          <td>X</td>
          <td>O</td>
          <td>X</td>
          <td>O</td>
          <td>O</td>
          <td>X</td>
        </tr>
      </table>
    </div>
    *, * :: before, * :: after {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .w {
      position: relative;
      border: 5px solid #ddd;
    }
    table {
      display: block;
      max-width: 100%;
      background: skyblue;
      border-spacing: 0;
      overflow-x: auto;outline: 1px solid skyblue;
    }
    th,
    td,
    tr>: first-child :: before {
      padding: .25em .5em;
    }
    tr>th,
    tr>td {
      min-width: 5em;
      max-width: 5em;
      text-align: center;
      word-break: break-all;
      background: #fff;
      border: 0 solid green;
      border-right: 1px solid green;
      border-bottom: 1px solid green;
    }
    tr>: first-child :: before {
      content: attr (data-cont);
      position: absolute;
      left: 0;
      display: block;
      width: 5em;
      border: 1px solid red;
      background: rgba (255, 255, 255, .7);
      margin-top: calc (-. 25em-1px);
    }

    I want to manage the leftmost element (the first child element oftr), so use the: first-childpseudo-class

    Elements withposition: absolute;are placed relative to the ancestor element with the nearestposition: relative;/> →.w {position: relative;},tr>: first-child :: before {position: absolute;}

    To inherit the height, it must be a child element of the element
    → Use:: beforepseudo-element,height: inherit;
    (Ifheight: 100%;, the height of.wwill be assigned.)

    I want to change the display flexibly using attribute values ​​
    ->Assign the value in thedata-contattribute created byattr (data-cont)to thecontentproperty of the pseudo class.

    Other tweaks
    (Usecalc ()with negative margin to shift the position up,border-spacing: 0;,word-break: break-all ;or ...)

    Even if it is said that it is easy to explain, it will just be longer, so round it up around here

    The bottom line is that if you do your best, you can do something like that, so try it yourself and do your best. More

    [CSS] Memorandum of how to use pseudo-class "structure pseudo-class"

    What are CSS pseudo-elements? How to use before and after

    Get css pseudo element content from html with attr ()

    [CSS] Summary of how to use "calc () function" that is convenient to know -layout, element arrangement, font size definition, etc.

    CSS property expressing string wrapping

      

    By the way, overflow-wrap was renamed to the current overflow-wrap in the CSS3 Text specification because word-wrap, which was Microsoft's original extension, was implemented in many browsers. The word-wrap can be used without any problems so far even after the rename.