如何使我的行表響應

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 */ 
}