表@media查询显示问题

Question

我已经创建了一个表格，其中我在1行中有5个单元格我希望以900px宽度显示所有单元格，如果屏幕尺寸下降，则表格应显示第一行中的4个单元格和第二行中的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

首先在表上设置此样式   border-collapse: separate; 并将 display:inline-block 添加到 td 。在 @media 之前声明它然后那样做：）。