使用flexbox创建响应表

Question

如何创建响应表？

我想要的表与此类似：

该表必须是响应式的，因此需要更改的是列的宽度。

我认为最好的解决方案是使用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而不是表。 无论如何，你可以在这里使用CSS网格布局只是为了不使用表格 - 很容易设置问题中的代码。

另外在这里使用display: contents - 请注意它在较新的浏览器中受支持 - 此处提供完整的支持说明。

 .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>