使用 flexbox 创建响应式 table

Question

如何创建响应式 table？

我要的table和这个类似：

table必须是响应式的，所以要改变的是列的宽度。

我认为最好的解决方案是使用 Flexbox，但是如何使用呢？

我试试这个代码：

.container {
  display: flex;
  border: 1px solid black;
}

.column {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

.cell {
  border: 1px solid black;
  padding: 5px;
}

<div class="container">
  <div class="column">
    <div class="cell"></div> <!-- empty cell -->
    <div class="cell">something</div>
    <div class="cell">dog</div>
    <div class="cell">more dogs</div>
  </div>

  <div class="column">
    <div class="cell">column2 long title</div>
    <div class="cell">abc</div>
    <div class="cell">a</div>
    <div class="cell">aaaaaaa</div>
  </div>

  <div class="column">
    <div class="cell">column 3 tilew</div>
    <div class="cell">bbbb</div>
    <div class="cell">da</div>
    <div class="cell">f</div>
  </div>

  <div class="column">
    <div class="cell">something</div>
    <div class="cell">ggggg</div>
    <div class="cell">f</div>
    <div class="cell">cats</div>
  </div>
</div>

我简单地创建了4列，每列的行数相同，当然，它们的高度不会相同。我该如何解决？

那么，第一个单元格必须为空

非常感谢！

Answer 1

我不明白为什么 您需要使用 flexbox 而不是 table。无论如何，您可以在这里使用 CSS 网格布局只是为了 而不是 使用 tables - 问题中的代码很容易设置。

此处也使用 display: contents - 请注意，它在较新的浏览器中受支持 - 完整支持说明 here.

.container {
  display: grid; /* grid containers */
  grid-template-columns: repeat(4, 1fr); /* four columns */
  grid-template-rows: repeat(4, 1fr); /* four rows */
  grid-auto-flow: column; /* in column direction */
  border: 1px solid black;
}

.column {
  display: contents; /* the child elements would be grid items */
  border: 1px solid black;
}

.cell {
  border: 1px solid black;
  padding: 5px;
}

<div class="container">
  <div class="column">
    <div class="cell"></div> <!-- empty cell -->
    <div class="cell">something</div>
    <div class="cell">dog</div>
    <div class="cell">more dogs</div>
  </div>

  <div class="column">
    <div class="cell">column2 long title</div>
    <div class="cell">abc</div>
    <div class="cell">a</div>
    <div class="cell">aaaaaaa</div>
  </div>

  <div class="column">
    <div class="cell">column 3 tilew</div>
    <div class="cell">bbbb</div>
    <div class="cell">da</div>
    <div class="cell">f</div>
  </div>

  <div class="column">
    <div class="cell">something</div>
    <div class="cell">ggggg</div>
    <div class="cell">f</div>
    <div class="cell">cats</div>
  </div>
</div>

Answer 2

在这里！

/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}



/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

 .responsive-table-input-matrix {
  display: block;
  position: relative;
  width: 100%;

  &:after {
   clear: both;
   content: '';
   display: block;
   font-size: 0;
   height: 0;
   visibility: hidden;
  }

  tbody {
   display: block;
   overflow-x: auto;
   position: relative;
   white-space: nowrap;
   width: auto;


   tr {
    display: inline-block;
    vertical-align: top;

    td {
     display: block;
     text-align: center;

     &:first-child {
      text-align: left;
     }
    }
   }
  }

  thead {
   display: block;
   float: left;
   margin-right: 10px;

   &:after {
    clear: both;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
   }

   th:first-of-type {
    height: 1.4em;
   }

   th {
    display: block;
    text-align: right;

    &:first-child {
     text-align: right;
    }
   }
  }
 }
}

<table class="responsive-table-input-matrix">
  <thead>
  <tr>
   <th></th>
   <th>Owner</th>
   <th>Group</th>
   <th>Others</th>
   <th>Administrators</th>
   <th>Managers</th>
   <th>Engineers</th>
   <th>Sales</th>
   <th>Employees</th>
   <th>Customers</th>
   <th>Community</th>
  </tr>
  </thead>
  <tbody>

  <tr>
   <td>Add</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td>Edit</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
  <td>Delete</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td>Rename</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td>Move</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  </tbody>
 </table>

使用 flexbox 创建响应式 table

Create responsive table using flexbox

css

flexbox

responsive