Table columns stacking with smaller screens

Question

How would I go about adapting a normal (likely inefficient) HTML table to make each column stack on top of each other when on a smaller screen? Currently the columns just move closer together on mobile screens but I'd like every column just to be on top of eachother.

Desktop:

Heading 1 | Heading 2 | Heading 3

List1 | List2 | List3

List1 | List2 | List3

List1 | List2 | List3

Mobile:

Heading 1

List1

List1

List1

Heading 2

List2

List2

List2

Heading 3

List3

List3

List3

Code I've started with

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

If it is possible, I would restructure, and dont use tables at all:

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>

This way, you can make each div inside #table , 25% width and when the screen size gets smaller, you can make them full width or even 33% or 50% width to gradually make them fill out more of the width. You can even use display:flex; to center the divs with heading 5 & 6.

Example:

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