移动版首先重新定位下表的第二列

Question

我正在尝试将表格的第二列重新定位在第一列的正下方。我正在使用 html 表。现在它 [看起来像这样]：Screenshot 或 live site。但在移动版本上，它仍然保留这 2 列！我怎样才能把第二列放在第一位？ 您可以通过文章开头的链接打开 HTML 代码（在网站上它的业务服务、表格）或查看此处：

HTML：

.TableOfReasons {
    position: relative;
    left: 0%;
    right: 100%;
}
table {
    background-color: transparent;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

<table class="TableOfReasons">
   <!--One block-->
    <tr>
      <td class="feature-title"><h4>Odours elimination</h4></td>
      <td class="right-clmn feature-title"><h4>Communal service</h4></td>
    </tr>
    <tr>
      <td class="feature-img"><image src="images/1.jpg" width="250px"></td>
      <td class="right-clmn feature-img"><image src="images/5.png" height="167px"></td>
    </tr>
    <tr>
      <td class="feature-button"><a href="/more-page.php?language=en&name=removing-smell&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td>
      <td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=communal-service&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td>
    </tr>
    <!--End of one block-->

    <!--One block-->
    <tr>
      <td class="feature-title"><h4>Stimulation of avian growth <br> and prevention of infectious diseases </h4></td>
      <td class="right-clmn feature-title"><h4>Stimulation of animal <br> growth and prevention of infectious diseases </h4></td>
    </tr>
    <tr>
      <td class="feature-img"><image src="images/3.jpg" height="167px"></td>
      <td class="right-clmn feature-img"><image src="images/2.jpg" width="250px"></td>
    </tr>
    <tr>
      <td class="feature-button"><a href="/more-page.php?language=en&name=birds&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td>
      <td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=animals&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td>
    </tr>
    <!--End of one block-->

    <!--One block-->
    <tr>
      <td class="feature-title"><h4>Greenhouses</h4></td>
      <td class="right-clmn feature-title"><h4>Smell at a bar, restaurant, hotel etc.</h4></td>
    </tr>
    <tr>
      <td class="feature-img"><image src="images/6.jpg" width="250px"></td>
      <td class="right-clmn feature-img"><image src="images/4.jpg" width="250px"></td>
    </tr>
    <tr>
      <td class="feature-button"><a href="/more-page.php?language=en&name=plants&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td>
      <td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=smell-in-public-place&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td>
    </tr>
    <!--End of one block-->
    <!--One block-->
    <tr>
      <td class="feature-title"><h4>Beekeeping</h4></td>
      <td class="right-clmn feature-title"><h4>A the gym</h4></td>
    </tr>
    <tr>
      <td class="feature-img"><image src="images/8.jpg" width="250px"></td>
      <td class="right-clmn feature-img"><image src="images/7.jpg" width="250px"></td>
    </tr>
    <tr>
      <td class="feature-button"><a href="/more-page.php?language=en&name=bees&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td>
      <td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=at-gym&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td>
    </tr>
    <!--End of one block-->

</table>

Answer 1

您可以将数据放在两个不同的表中（一个用于左侧数据，一个用于右侧数据，否则完全相同）并将.TableOfReasons的css更改为：

.TableOfReasons {
  position: relative;
  left: 0%;
  display: inline-block;
}

那么你需要在头部添加html<meta>标签：

  <meta name="viewport" content="width=device-width, initial-scale=1">

然后在屏幕改变宽度时使用这个css将它们都更改为display: block;；

@media screen and(max-width: 600px) {
  .TableOfReasons {
    display: block;
  }
}

演示：

.TableOfReasons {
  position: relative;
  left: 0%;
  display: inline-block;
}
table {
  background-color: transparent;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and(max-width: 600px) {
  .TableOfReasons {
    display: block;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<table class="TableOfReasons">
  <!--One block-->
  <tr><td class="feature-title"><h4>Odours elimination</h4></td></tr>
  <tr><td class="feature-img"></td></tr>
  <tr><td class="feature-button"><a href="/more-page.php?language=en&name=removing-smell&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="feature-title"><h4>Stimulation of avian growth <br> and prevention of infectious diseases</h4></td></tr>
  <tr><td class="feature-img"></td></tr>
  <tr><td class="feature-button"><a href="/more-page.php?language=en&name=birds&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="feature-title"><h4>Greenhouses</h4></td></tr>
  <tr><td class="feature-img"></td></tr>
  <tr><td class="feature-button"><a href="/more-page.php?language=en&name=plants&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="feature-title"><h4>Beekeeping</h4></td></tr>
  <tr><td class="feature-img"></td></tr>
  <tr><td class="feature-button"><a href="/more-page.php?language=en&name=bees&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
</table>
<table class="TableOfReasons">
  <!--One block-->
  <tr><td class="right-clmn feature-title"><h4>Communal service</h4></td></tr>
  <tr><td class="right-clmn feature-img"></td></tr>
  <tr><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=communal-service&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="right-clmn feature-title"><h4>Stimulation of animal<br>growth and prevention of infectious diseases</h4></td></tr>
  <tr><td class="right-clmn feature-img"></td></tr>
  <tr><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=animals&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="right-clmn feature-title"><h4>Smell at a bar, restaurant, hotel etc.</h4></td></tr>
  <tr><td class="right-clmn feature-img"></td></tr>
  <tr><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=smell-in-public-place&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="right-clmn feature-title"><h4>A the gym</h4></td></tr>
  <tr><td class="right-clmn feature-img"></td></tr>
  <tr><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=at-gym&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
</table>

CodePen

Answer 2

@media (max-width: 600px) {
    .TableOfReasons table tr{
        display:block;
        width:100%;
        padding:0px;
        margin:0px;
    }

    .TableOfReasons table td{
        display:block;
        width:100%;
        padding:0px;
        margin:0px;
        clear:block;
    }
}

试试这个