Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov
Таблица с горизонтальной прокруткой
Уменьшайте ширину окна, чтобы увидеть результат.
Цена восстановления и заправки картриджей SAMSUNG
Тип | Наименование | Восст. | Запр. |
---|---|---|---|
MLTD108S | Samsung №MLTD108S ML-1640/1641/1645/2240/2241 (MLTD108S) | 1100 | 700 |
MLTD109S | Samsung №MLTD109S SCX-4300 прошитый (MLTD109S) | 800 | 350 |
MLTD111S | Samsung №MLTD111S M2020/М2022/М2070 (MLTD111S) | 700 | 300 |
Исходный код этого примера:
<style>
.table-box {
max-width: 1024px;
}
.table-box p {
font-size: larger;
font-weight: bold;
}
table {
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
}
thead {
border: 1px solid #ccc;
}
th, td {
border-left: 1px solid #ccc;
white-space: nowrap;
padding: 5px;
}
td:nth-last-child(-n+2) {
text-align: right;
}
@media screen and (max-width: 732px) {
.table-box {
overflow-x: scroll;
}
}
</style>
<div class="table-box">
<p>Цена восстановления и заправки картриджей SAMSUNG</p>
<table>
<thead>
<tr>
<th>Тип</th>
<th>Наименование</th>
<th>Восст.</th>
<th>Запр.</th>
</tr>
</thead>
<tbody>
<tr>
<td>MLTD108S</td>
<td>Samsung №MLTD108S ML-1640/1641/1645/2240/2241 (MLTD108S)</td>
<td>1100</td>
<td>700</td>
</tr>
<tr>
<td>MLTD109S</td>
<td>Samsung №MLTD109S SCX-4300 прошитый (MLTD109S)</td>
<td>800</td>
<td>350</td>
</tr>
<tr>
<td>MLTD111S</td>
<td>Samsung №MLTD111S M2020/М2022/М2070 (MLTD111S)</td>
<td>700</td>
<td>300</td>
</tr>
</tbody>
</table>
</div>
.
Прокомментировать/Отблагодарить