отзывчивый стол с выбранным: выбрано-падение получилось отрезано за столом

Question

Я использую отзывчивую таблицу от этого site с выбранным множественным выбором.

Это файл css rwd-table с небольшим изменением. Но ничего особенного, я просто меняю цвет макета.

@charset "utf-8"; 
/* CSS Document for Responsive Table*/ 
.rwd-table { 
    margin: 1em 0; 
    min-width: 300px; 
    width:auto; 
    border: 1px solid #ddd; 
} 
.rwd-table tr { 
    border: 1px solid #ddd; 
} 
.rwd-table th { 
    display: none; 
} 
.rwd-table td { 
    display: block; 
} 
.rwd-table td:first-child { 
    padding-top: .5em; 
} 
.rwd-table td:last-child { 
    padding-bottom: .5em; 
} 
.rwd-table td:before { 
    content: attr(data-th) ": "; 
    font-weight: bold; 
    width: 6.5em; 
    display: inline-block; 
} 
@media (min-width: 650px) { 
    .rwd-table td:before { 
    display: none; 
    } 
} 
.rwd-table th, .rwd-table td { 
    text-align: left; 
} 
@media (min-width: 650px) { 
    .rwd-table th, .rwd-table td { 
    display: table-cell; 
    padding: .25em .5em; 
    } 
    .rwd-table th:first-child, .rwd-table td:first-child { 
    padding-left: 0; 
    } 
    .rwd-table th:last-child, .rwd-table td:last-child { 
    padding-right: 0; 
    } 
} 

.rwd-table { 
    color: #545454; 
    border-radius: .4em; 
    overflow: hidden; 
} 
.rwd-table tr { 
    border-color: #dddddd; 
} 
.rwd-table th, .rwd-table td { 
    margin: .5em 1em; 
} 
@media (min-width: 650px) { 
    .rwd-table th, .rwd-table td { 
    padding: 0.5em 1em !important; 
    } 
} 
.rwd-table th, .rwd-table td:before { 

} 

Единственное, что не работает, - это отсечка, выбранная за столом. Я пытался изменить z-index, но не работал.

Я терплю код на jsfiddle here

Если кто-то может помочь мне, будет очень признателен. Благодарю.

Answer 1

Вы раскололи CSS для одних и тех же выборов следующим образом:

.rwd-table { 
    margin: 1em 0; 
    min-width: 300px; 
    width:auto; 
    border: 1px solid #ddd; 
} 
.rwd-table tr { 
    border: 1px solid #ddd; 
} 
.rwd-table th { 
    display: none; 
} 
.rwd-table td { 
    display: block; 
} 

И

.rwd-table { 
    color: #545454; 
    border-radius: .4em; 
    overflow: hidden; // <<<<<<<<<< overflow causing the problem 
} 
.rwd-table tr { 
    border-color: #dddddd; 
} 
.rwd-table th, .rwd-table td { 
    margin: .5em 1em; 
} 

Во втором битом коде, ваш настраивают переполнение таблицы как скрытый, поэтому выбранный скрыты ..

Рекомендуется сочетать CSS для одних и тех же селекторов в одном месте, чтобы предотвратить неоднозначность.

Вот рабочая fiddle