How to make a table that slides horizontally on mobile


#1

Hi there,

I want to make a table that could slide horizontally by flip on mobile screen.

my site URL:
https://xn–eckipmx7dxa4b6ithka3ib2312sfk9d.site/

This is my current table (or you can see the screenshot below). The table has 4 columns now, and I want 8 columns, without changing the table height.
2

I added the following code to style.css.

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

The test page:
http://demo.xn–eckipmx7dxa4b6ithka3ib2312sfk9d.site/demosite/

However, it didn’t work. The columns just squeeze in the screen-size and can’t scroll. The column width also shortened. The simple table that I added underneath worked. Thus something in hikakuhyo-body class may be causing the error, but I can’t find it and got stuck. If you could possible help me with this, I would really appreciate it!!

Css code for the test simple table underneath:

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

The new style.css

.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; /* ピンク */ }

  .hikakuhyo-body td small { font-size: 1.0rem;}

}

My index.php

      <div class="hikakuhyo">

    <?php if (is_mobile()) : // Show on mobile ?>


      <div class="hikakuhyo-body">

        <table>
          <tr>
            <th>&nbsp;</th>
           <th class="product-img"><a><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/calobyeplus_product_s.png" alt="カロバイプラス">カロバイプラス</a></th>
            <th class="product-img"><a><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/suppon_product_s.png" alt="肥後すっぽんもろみ酢">肥後すっぽんもろみ酢</a></th>
            <th class="product-img"><a><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/lakubi_product_s.png" alt="ラクビ LAKUBI">ラクビ LAKUBI</a></th>
            <th class="product-img"><a><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/lakubi_product_s.png" alt="ラクビ LAKUBI">ラクビ LAKUBI</a></th>
            <th class="product-img"><a><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/lakubi_product_s.png" alt="ラクビ LAKUBI">ラクビ LAKUBI</a></th>
            <th class="product-img"><a><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/lakubi_product_s.png" alt="ラクビ LAKUBI">ラクビ LAKUBI</a></th>
          </tr>
          <tr>
            <th>『実感した!』ユーザーの評価</th>
            <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_otona_point.png" alt="98点" class="point"></td>
            <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_surattokiriri_point.png" alt="92点" class="point"></td>
            <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_kokorokaradaanshinyousan_point.png" alt="90点" class="point"></td>
            <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_kokorokaradaanshinyousan_point.png" alt="90点" class="point"></td>
            <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_kokorokaradaanshinyousan_point.png" alt="90点" class="point"></td>
            <td><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hikakuhyo_kokorokaradaanshinyousan_point.png" alt="90点" class="point"></td>
</tr>

I’m not well-versed with coding stuff, so the simpler the code, the better. Thank you!!


#2

Give the tables a minimum width and wrap them in a div that has overflow:auto set.

To get it to work well you may need to write some extra JS code.

Here’s some scrolling tables I made recently: http://dic.bahama.land/deposit-insurance/calculations/joint

Resize your window to about 320px wide.