css - 表@media查询显示问题

Question

我创建了一个表格，其中一行有 5 个单元格，我想以 900 像素的宽度显示所有单元格，如果屏幕尺寸缩小，表格应该在第一行显示 4 个单元格，在第二行显示 1 个单元格，依此类推每行中的 1 个单元格用于移动查看。我在这里发布了代码 https://jsfiddle.net/e8hsmubv/

CSS 代码-

@media all and (max-width:565px){
table{
    width:100%;
}
td{
    display:block;
    width:100%;
}
tr{
    display:block;
    margin-bottom:00px;
}
}

Answer 1

首先在您的 table 上设置这个样式 border-collapse: separate; 并添加 display:inline-block 到 td。在 @media 之前声明它就可以了:).