Question

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

HTML： `

<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>

` CSS：

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

Answer 1

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

试试这个

Answer 2

您可以将数据放在两个不同的表中（一个用于左侧数据，一个用于右侧数据，否则完全相同）并将.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;
  }
}

CodePen

首先重新定位下面的第二列表格以获取移动版本

2 个答案: