使用较小屏幕堆叠的表格列

Question

如何在较小的屏幕上调整正常（可能效率低下）的HTML表格，使每个列堆叠在一起？目前，这些专栏在移动屏幕上的距离越来越近，但我希望每一列都能在彼此之上。

桌面：

标题1 |标题2 |标题3

List1 | List2 |项目list3

List1 | List2 |项目list3

List1 | List2 |项目list3

移动：

标题1

的List1

的List1

的List1

标题2

列表2

列表2

列表2

标题3

项目list3

项目list3

项目list3

代码我从

开始

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＆amp; 6。

示例：

#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%;
    }
}