Question

我有这个表只有一个表行（<tr>），其中包含4个<td>元素。当屏幕尺寸变为768px以下时，我想在两个“行”上展开那4个<td>，每行包含两个<td>个元素......

我该怎么做？我尝试给每个<td>宽度为50％，然后向左浮动，但这给了我一行<td>，剩下一些空格直到表格的边界......

<table id="tabel1" cellspacing="0" width="1000px">
    <tr>
        <td width="25%">Laurens Mäkel</td>
        <td width="25%">Mozartlaan 15</td> 
        <td width="25%">8031 AA</td>
        <td width="25%">97039259@example.com</td>
    </tr>
</table>

Answer 1

下面的

是使用<table>和display:inline-block的代码段。 margin-left:-4px是解决两个inline-block元素之间额外空间的问题。

＆＃13;

@media all and (max-width: 768px) {
  #tabel1{
    width:90%;
    box-sizing: border-box;
  }
  #tabel1 td{
    display:inline-block;
    width:50%;
        box-sizing: border-box;
  }
  #tabel1 td:nth-child(3){
    clear:both;
  }
}

＆＃13;

<table id="tabel1" cellspacing="0" width="1000px" border="1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

＆＃13;

Answer 2

通过flex-box更好地制作

.table {
  display: flex;
}

.table .col {
  width: 25%;
}

@media screen and (max-width: 786px) {
  .table {
    flex-wrap: wrap;
  }
  .table .col {
    width: 50%;
  }
}

<div class="table">
<div class="col">COL</div>
<div class="col">COL</div>
<div class="col">COL</div>
<div class="col">COL</div>
</div>

JsFiddle - https://jsfiddle.net/grinmax_/avav3dLs/

当屏幕尺寸发生变化时，CSS - 4到2

2 个答案: