Две отдельные реагирующие таблицы в странице

Question

Попытка создать для отдельных таблиц на странице: Kompiuterių nuoma

Первый стол на телефон выглядит просто отлично, однако, второй один использует те же метки, как и в первой. Как это сделать?

CSS:

table { 
    width: 100%; 
    border-collapse: collapse; 
} 
tr:nth-of-type(odd) { 
    background: #eee; 
} 
th { 
    background: #fbfbfb; 
    color: black; 
    font-weight: bold; 
} 
td, 
th { 
    padding: 6px; 
    border: 1px solid #ccc; 
    text-align: left; 
} 
*/@media only screen and (max-width: 760px), 
(min-device-width: 768px) and (max-device-width: 1024px) { 
    table, 
    thead, 
    tbody, 
    th, 
    td, 
    tr { 
    display: block; 
    } 
    thead tr { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    } 
    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; 
    } 
    td:nth-of-type(1):before { 
    content: ""; 
    } 
    td:nth-of-type(2):before { 
    content: "MSO 365 Business"; 
    } 
    td:nth-of-type(3):before { 
    content: "ESET Endpoint AV"; 
    } 
    td:nth-of-type(4):before { 
    content: "ESET Endpoint SEC"; 
    } 
    td:nth-of-type(5):before { 
    content: "Krepšys"; 
    } 
    td:nth-of-type(6):before { 
    content: "Klaviatūra?"; 
    } 
    td:nth-of-type(7):before { 
    content: "Laidinė pelė"; 
    } 
    td:nth-of-type(8):before { 
    content: "Bevielė pelė"; 
    } 
    td:nth-of-type(9):before { 
    content: "USB Dock"; 
    } 
    td:nth-of-type(10):before { 
    content: "Basic Dock"; 
    } 
    td:nth-of-type(11):before { 
    content: "Pro Dock"; 
    } 
    td:nth-of-type(12):before { 
    content: "Kaina"; 
    } 
} 

Answer 1

Если добавить атрибут в вашей td-х, который содержит текст заголовка можно полностью удалить необходимость хранить все ваши заголовки в CSS и кипятить ваш код вниз к этому :

td:before { 
    content: attr(title); 
} 

Это будет работать для любого числа таблиц, а также означает, что вы можете легко выводить правильный заголовок из источника данных прямо в разметку; полностью удалив его из вашего CSS.

Пример:

table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
    margin-bottom: 30px; 
 
} 
 
tr:nth-of-type(odd) { 
 
    background: #eee; 
 
} 
 
th { 
 
    background: #fbfbfb; 
 
    color: black; 
 
    font-weight: bold; 
 
} 
 
td, 
 
th { 
 
    padding: 6px; 
 
    border: 1px solid #ccc; 
 
    text-align: left; 
 
} 
 
@media only screen and (max-width: 760px) { 
 
    table, 
 
    thead, 
 
    tbody, 
 
    th, 
 
    td, 
 
    tr { 
 
    display: block; 
 
    } 
 
    thead tr { 
 
    position: absolute; 
 
    top: -9999px; 
 
    left: -9999px; 
 
    } 
 
    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; 
 
    } 
 
    td:before { 
 
    content: attr(title); 
 
    } 
 
}

<table> 
 
    <tr> 
 
     <th>Title 1</th> 
 
     <th>Title 2</th> 
 
    </tr> 
 
    <tr> 
 
     <td title="Title 1">1 TD</td> 
 
     <td title="Title 2">2 TD</td> 
 
    </tr> 
 
    <tr> 
 
     <td title="Title 1">3 TD</td> 
 
     <td title="Title 2">4 TD</td> 
 
    </tr> 
 
    <tr> 
 
     <td title="Title 1">5 TD</td> 
 
     <td title="Title 2">6 TD</td> 
 
    </tr> 
 
    <tr> 
 
     <td title="Title 1">7 TD</td> 
 
     <td title="Title 2">8 TD</td> 
 
    </tr> 
 
</table> 
 

 
<table> 
 
    <tr> 
 
     <th>Title 3</th> 
 
     <th>Title 4</th> 
 
    </tr> 
 
    <tr> 
 
     <td title="Title 3">9 TD</td> 
 
     <td title="Title 4">10 TD</td> 
 
    </tr> 
 
    <tr> 
 
     <td title="Title 3">11 TD</td> 
 
     <td title="Title 4">12 TD</td> 
 
    </tr> 
 
    <tr> 
 
     <td title="Title 3">13 TD</td> 
 
     <td title="Title 4">14 TD</td> 
 
    </tr> 
 
    <tr> 
 
     <td title="Title 3">15 TD</td> 
 
     <td title="Title 4">16 TD</td> 
 
    </tr> 
 
</table>

JSFIDDLE VERSION