如何使我的行表响应

Question

有谁知道如何使我的行和列的表移动响应。我从数据库中插入数据，但它们不是移动响应。 element1和content1 id用于元素的背景。你能告诉我如何使我的行和列移动响应表？

这是我的HTML和PHP：

<section> 

    <table> 

      <tr> 
      <?php 
       $counter = 0; 
       while($product = mysqli_fetch_assoc($featured)){ 
        if($counter % 4 == 0){ 
         echo '</tr><tr>'; 
        } 
        ++$counter; 
        ?> 
        <td> 
        <div id="element1"></div> 
        <div id="content1"> 
         <img src="<?= $product['image']; ?>" alt="<?=   $product['title']; ?>"> 
         <h4><?= $product['title']; ?></h4> 
         <hr> 
         <p class="description"><?= $product['description']; ?></p> 

      <!--------BUTTON READ MORE--------> 

      <div id="hovers"> 
       <a href="<?php echo $product['href']?>" class="button" target="_blank"> 
        <span class="contentbut"> Read More</span> 
       </a> 
      </div> 
        </td> 
        <?php 
       } 
      ?> 
      </tr> 
     </div> 
    </table>  
    </section> 

这里是我的CSS：

#element1{ 
    position: relative; 
    z-index:1; 
    width:320px; 
    height:380px; 
    text-align:left; 

    background: url('../interviewsbackground.png') no-repeat center; 
    border:#F90 2px solid; 

} 

#content1{ 
    position:relative; 
    z-index:2; 
    top: -380px; 
    width:290px; 
    color:#FFF; 
    text-align:left; 
    margin:34px; 
    margin-bottom:-240px; 
} 


    /*-------------------------3D BUTTONS-----------------*/ 
    .button{ 
    display:block; 
    width:120px; 
    height:45px; 
    position:relative; 
    border:2px solid #04a; 
    margin: 0px 0px; 
    border-radius:5px; 
    } 

    .button .contentbut{ 
    display:block; 
    position:absolute; 
    bottom:6px; 
    width:100%; 
    height:100%; 
    line-height:50px; 
    background-color:#09f; 
    text-align:center; 
    color:#fff; 
    text-transform:uppercase; 
    box-shadow: 0 6px 0 #06c; 
    border-radius:5px; 
    transition:all 0.ls linear; 
    } 

Answer 1

那么你有两个简单的选择。你可以在你的css中使用百分比宽度/高度（例如对于所有宽度都是这样），或者你可以在css中查看媒体定位，这更加复杂但可以给出更好的设计结果。

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

您可能也想看看破发点，尽管这是一个步骤更复杂。百分比可能就足够了。

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

Answer 2

在你的情况，答案是沟表并用一个列表+媒体查询+ Flexbox的。你所显示的不是表格数据。它会清理你需要吐出4行，并允许你使用更多的屏幕尺寸。

https://jsfiddle.net/sheriffderek/0egLgmge/

这并不用你的确切内容 - 但我从另一个答案再利用它 - 我认为这将使其点。 ：）

标记

<ul class='thing-list'> 

    <li class='thing'> 
    <a class='link' href='#'> 
     <figure> 
     <img src='https://placehold.it/800x1000' alt='thing poster'> 
     </figure> 
     <h1 class='title'>Title</h1> 
     <div class='rating'> 
     xxx 
     </div> 
    </a> 
    </li> 

    ... 

风格

/* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ 
/* apply a natural box layout model to all elements, but allowing components to change */ 
html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
} 

ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

a { /* removes link defaults */ 
    text-decoration: none; 
    color: inherit; 
} 

figure { 
    margin: 0; 
} 

figure img { /* make img's in figures responsive to their parent */ 
    display: block; 
    width: 100%; 
    height: auto; 
} 

.thing-list { 
    display: flex; 
    flex-direct: row; 
    flex-wrap: wrap; 
    justify-content: space-between; 
} 

.thing-list .thing { 
    flex-basis: 100%; 
    background: rgba(0,0,0,.1); 
    margin-bottom: 30px; 
} 

@media (min-width: 500px) { 
    .thing-list .thing { 
    flex-basis: 48%; /* these are very rough... */ 
    } 
} 

@media (min-width: 900px) { 
    .thing-list .thing { 
    flex-basis: 30%; 
    } 
} 

.thing-list .thing .link { 
    display: block; /* this has children that are block - so it HAS to be block */ 
} 

.thing-list .thing figure { 
    /* */ 
} 

.thing-list .thing .title { 
    margin: 0; 
    padding: 10px; 
    font-size: 16px; 
    background: lightgreen; 
    color: white; 
} 

.thing-list .thing .rating { 
    padding: 10px; /* you can use flexbox for these stars too */ 
}