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

如果您需要隐藏它，可以使用：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。你应该在你的表中添加一个类，并使用它来使这个css更具体，这样你就不会在其他td中遇到麻烦：在你的网站之前。例如table.myvalues td:empty:before{display:none;}

Answer 2

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

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

&nbsp;

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

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

2 个答案: