CSS mobile table display conflicts with empty table cells

Issue

I'm using the CSS below on a table in a site written in PHP (Drupal, but have also tried on another straight html table). This is used to make tables look a little more presentable on mobile devices. This is a modified version of the code at this link: https://css-tricks.com/responsive-data-tables/. When I render this table in any browser, the last row is getting messed up if there are empty values in it. Basically if there are empty values it will display all of the labels from the empty cells in the last row on top of one another right below the table. All of the prior rows hide the empty fields just fine. This table must be able to have empty values in it. Does anyone know how to hide those last row cells if they contain empty values?

@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"; }
}

Solution

If you need to hide it you can use :empty MDN link.

This stops the before pseudo element to be visible if the td is empty. You can use content:""too.

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}

UPDATE with less css td:empty:before{display:none;}jsfiddle. You should add a class to your table and use it to make this css more specific so that you wont get into trouble in other td:before in your site. e.g. table.myvalues td:empty:before{display:none;}

Answered By - codegaze