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

Question

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

@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

如果您需要隐藏它，您可以使用：空MDN链接。

如果 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。您应该向表中添加一个类，并使用它使该 css 更加具体，这样您就不会在站点中的其他 td:before 中遇到麻烦。例如

table.myvalues td:empty:before{display:none;}

Answer 2

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

尝试在空表格单元格中弹出其中一些。 （不间断空格）

 

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

Answer 3

一种解决方案是在

min-height

元素上添加

td

。这对我有用。

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