Дисплей таблицы сотовой таблицы CSS конфликтует с пустыми ячейками таблицы

Question

Я использую CSS ниже в таблице на сайте, написанном на PHP (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 link.

Это предотвращает видимость перед псевдоэлементом, если td пуст. Вы также можете использовать 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

Если вы оказываетесь вне времени, чтобы найти более прогрессивное решение ..

Попробуйте выскакивают несколько из них в пустые ячейки таблицы. (Неразрывный пространство)

  

Подробнее: http://www.sightspecific.com/~mosh/www_faq/nbsp.html