CSS 移动 table 显示与空 table 单元格冲突

Question

我在用 PHP 编写的站点中的 table 上使用下面的 CSS（Drupal，但也尝试过另一个 html table).这用于使 tables 在移动设备上看起来更 presentable。这是此 link: https://css-tricks.com/responsive-data-tables/ 处代码的修改版本。当我在任何浏览器中呈现此 table 时，如果其中有空值，最后一行就会变得混乱。基本上，如果有空值，它将在 table 正下方显示最后一行空单元格中的所有标签。前面的所有行都很好地隐藏了空字段。此 table 必须能够包含空值。如果最后一行单元格包含空值，有人知道如何隐藏它们吗？

@media 
only screen and (max-width: 800px)  {

table, thead, tbody, th, td, tr { 
    display: block; 
}

thead tr { 
    display: none;
}

tr { border: 1px solid #ccc; }

td { 
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
}

td:before { 
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

/*
Label the data
*/
td:nth-of-type(1):before { content: "Date"; }
td:nth-of-type(2):before { content: "Reg. Deadline"; }
td:nth-of-type(3):before { content: "Event Name"; }
td:nth-of-type(4):before { content: "File 1"; }
td:nth-of-type(5):before { content: "File 2"; }
td:nth-of-type(6):before { content: "File 3"; }
td:nth-of-type(7):before { content: "File 4"; }
}

Answer 1

如果你需要隐藏它你可以使用:empty MDN link.

如果 td 为空，这将阻止 before 伪元素可见。您也可以使用 content:""。

td:nth-of-type(1):empty:before,
td:nth-of-type(2):empty:before,
td:nth-of-type(3):empty:before,
td:nth-of-type(4):empty:before,
td:nth-of-type(5):empty:before,
td:nth-of-type(6):empty:before,
td:nth-of-type(7):empty:before{display:none}

更新更少 css td:empty:before{display:none;}jsfiddle。您应该在 table 中添加一个 class 并使用它来使 css 更具体，这样您就不会在站点中的其他 td:before 中遇到麻烦。例如table.myvalues td:empty:before{display:none;}

Answer 2

如果您发现自己没有时间寻找更先进的解决方案..

尝试在空的 table 单元格中弹出其中一些。 (不间断space)

&nbsp;

更多信息： http://www.sightspecific.com/~mosh/www_faq/nbsp.html

CSS 移动 table 显示与空 table 单元格冲突

CSS mobile table display conflicts with empty table cells

html

css

html-table