手风琴中的表格做出响应

Question

我想让手风琴中的表格响应以下页面“www.harem-kebap.at” 函数Flex wrap: wrap 我试过了，没成功。

感谢您的帮助。问候

Normal Responsiv

Answer 1

* {
  box-sizing: border-box;
}


.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  }

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

table {
  border-collapse: collapse;
}
th,
td {
 
  padding: 10px 15px;
}
th {
  font-weight: bold;
}

<div class="row">
  <div class="column">
   <h2>Salad</h2>
    <table>
  <thead>
    <tr>
      <th scope="col" colspan="1">Item</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>AA</td>
    </tr>
    <tr>
      <td>BB</td>    
    </tr>
    <tr>
      <td>CC</td>     
    </tr>
    <tr>
      <td>DD</td>      
    </tr>
  </tbody>
  
</table>
  </div>
  <div class="column">
    <h2>Fingerfood</h2>
     <table>
  <thead>
    <tr>
      <th scope="col" colspan="1">Item</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>AA</td>
    </tr>
    <tr>
      <td>BB</td>    
    </tr>
    <tr>
      <td>CC</td>     
    </tr>
    <tr>
      <td>DD</td>      
    </tr>
  </tbody>
  
</table>
  </div>
  <div class="column">
    <h2>Schnitzel</h2>
    <table>
  <thead>
    <tr>
      <th scope="col" colspan="1">Item</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>AA</td>
    </tr>
    <tr>
      <td>BB</td>    
    </tr>
    <tr>
      <td>CC</td>     
    </tr>
    <tr>
      <td>DD</td>      
    </tr>
  </tbody>
  
</table>
  </div>
</div>

手风琴中的表格做出响应

Tables in Accordion make responsiv

html

css

responsive