html - 表列与较小的屏幕堆叠

Question

在较小的屏幕上，我将如何调整一个普通的(可能效率低下的)HTML 表格，使每个列堆叠在彼此之上？目前，这些列在移动屏幕上靠得更近了，但我希望每一列都在彼此之上。

桌面:

标题 1 |标题 2 |标题 3

list 1 | list 2 |列表3

list 1 | list 2 |列表3

list 1 | list 2 |列表3

手机:

标题 1

列表1

列表1

列表1

标题 2

列表2

列表2

列表2

标题 3

列表3

列表3

列表3

我开始的代码

HTML

<div id="table">
<table style="table-layout: fixed; width: 80%; text-align: left;" align="center">
    <tr>
      <th class="headings">Heading 1</th>
      <th class="headings">Heading 2</th>
      <th class="headings">Heading 3</th>
      <th class="headings">Heading 4</th>
    </tr>
    <tr>
      <th style="vertical-align:top"><ul class="list">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul></th>

      <th style="vertical-align:top"><ul class="list">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul></th>

      <th style="vertical-align:top"><ul class="list">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul></th>
      <th style="vertical-align:top"><ul class="list">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul></th>
    </tr>
    <tr>
      <th></th>
      <th class="headings">Heading 5</th>
      <th class="headings">Heading 6</th>
      <th></th>
    </tr>
    <tr>
      <th></th>
      <th style="vertical-align:top"><ul class="list">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul></th>
      <th class="list" style="vertical-align:top"><ul class="list">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul></th>
    </tr>
</table>

CSS

  #table {
    text-align: center;
  }
  .list {
    list-style:none;
    font-size: 19px;
    font-weight: 800;
    align: top;
  }
  .headings {
    font-weight: 900;
    font-size: 25px;
    text-align: left;
  }
  ul {
    margin: 1em 0;
    padding: 0 0 0 10px;
  }
  li {
    margin: 0.5em 0;
  }

Answer 1

如果可能的话，我会重组，并且根本不使用表格:

HTML:

<div id="table">
   <div>
      <h2 class="headings">Heading 1</h2>
      <ul class="list">
         <li>Item</li>
         <li>Item</li>
         <li>Item</li>
      </ul>
   </div>
   <div>
      <h2 class="headings">Heading 2</h2>
      <ul class="list">
         <li>Item</li>
         <li>Item</li>
         <li>Item</li>
      </ul>
   </div>
   <div>
      <h2 class="headings">Heading 3</h2>
      <ul class="list">
         <li>Item</li>
         <li>Item</li>
         <li>Item</li>
      </ul>
   </div>
   <div>
      <h2 class="headings">Heading 4</h2>
      <ul class="list">
         <li>Item</li>
         <li>Item</li>
         <li>Item</li>
      </ul>
   </div>
   <div>
      <h2 class="headings">Heading 5</h2>
      <ul class="list">
         <li>Item</li>
         <li>Item</li>
         <li>Item</li>
      </ul>
   </div>
   <div>
      <h2 class="headings">Heading 6</h2>
      <ul class="list">
         <li>Item</li>
         <li>Item</li>
         <li>Item</li>
      </ul>
   </div>
</div>

这样，你可以让#table中的每个div，25%宽度，当屏幕尺寸变小时，你可以让它们全宽，甚至33%或50%宽度，逐渐他们填补了更多的宽度。您甚至可以使用 display:flex; 将标题 5 和 6 的 div 居中。

例子:

#table {
    display:flex;
    justify-content:center;
    flex-wrap: wrap;
    width:100%;
}

#table > div {
    width:25%;
}

@media(max-width:1024px){
    #table > div {
        width:33%;
    }
}

@media(max-width:768px){
    #table > div {
        width:50%;
    }
}

@media(max-width:500px){
    #table > div {
        width:100%;
    }
}