Да, просто замени весь шаблон на этот:
|
09.01.2020, 17:55
|
|
Аспирант
|
|
Регистрация: 19.06.2018
Сообщений: 63
|
|
|
Вопрос из 90x по таблице <table>
Всем привет!
Есть самая обычная ужасная таблица.
Как выделить единой рамкой все строки, относящиеся к конкретному пользователю?
Таблица динамическая. Количество строк у каждого разное. И пользователей разное количество.
Нужно добиться такого результата.
Казалось бы простая задачка, а решить не могу ))
<table>
<tr>
<td>Маша</td>
<td>Карандаш</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>Ручка</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td>Блокнот</td>
<td>4</td>
</tr>
<tr>
<td></td>
<td>Прищепка</td>
<td>4</td>
</tr>
<tr>
<td>Саша</td>
<td>Шышка</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td>Мышка</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>Батарейка</td>
<td>6</td>
</tr>
<tr>
<td>Коля</td>
<td>Баян</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td>Гармонь</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>Балалайка</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td>Гитара</td>
<td>1</td>
</tr>
<tr>
<td>Валя</td>
<td>Скотч</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td>Флешка</td>
<td>1</td>
</tr>
<tr>
<td>Ира</td>
<td>Спички</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td>Бычки</td>
<td>9</td>
</tr>
<tr>
<td></td>
<td>Штучки</td>
<td>5</td>
</tr>
</table>
|
|
09.01.2020, 19:06
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,156
|
|
tp-20,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table table:nth-child(2n + 1){
border : #FF0000 3px solid;
}
table table:nth-child(2n){
border : #0000FF 3px solid;
}
table table{
width: 100%;
margin: 1px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Маша</td>
<td>Карандаш</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>Ручка</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td>Блокнот</td>
<td>4</td>
</tr>
<tr>
<td></td>
<td>Прищепка</td>
<td>4</td>
</tr>
<tr>
<td>Саша</td>
<td>Шышка</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td>Мышка</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>Батарейка</td>
<td>6</td>
</tr>
<tr>
<td>Коля</td>
<td>Баян</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td>Гармонь</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td>Балалайка</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td>Гитара</td>
<td>1</td>
</tr>
<tr>
<td>Валя</td>
<td>Скотч</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td>Флешка</td>
<td>1</td>
</tr>
<tr>
<td>Ира</td>
<td>Спички</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td>Бычки</td>
<td>9</td>
</tr>
<tr>
<td></td>
<td>Штучки</td>
<td>5</td>
</tr>
</table>
<script>
let table;
document.querySelectorAll("tr").forEach(tr => {
const name = tr.querySelector("td").textContent.trim();
if(name) {
table = document.createElement("table");
tr.parentNode.replaceChild(table, tr)
}
if(table) table.append(tr)
})
</script>
</body>
</html>
|
|
09.01.2020, 21:29
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
tp-20, если таблица генерировалась (или писалась руками) с учётом <tbody> и rowspan бы, то таких проблем не было бы!
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid rgba(128, 128, 128, 0.25);
padding: 0.5em;
}
tbody:nth-child(odd) {
box-shadow: inset 0 0 0 3px red;
}
tbody:nth-child(even) {
box-shadow: inset 0 0 0 3px blue;
}
</style>
<table>
<tbody>
<tr>
<td rowspan="4">Маша</td>
<td>Карандаш</td>
<td>1</td>
</tr>
<tr>
<td>Ручка</td>
<td>3</td>
</tr>
<tr>
<td>Блокнот</td>
<td>4</td>
</tr>
<tr>
<td>Прищепка</td>
<td>4</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3">Саша</td>
<td>Шишка</td>
<td>5</td>
</tr>
<tr>
<td>Мышка</td>
<td>1</td>
</tr>
<tr>
<td>Батарейка</td>
<td>6</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="4">Коля</td>
<td>Баян</td>
<td>2</td>
</tr>
<tr>
<td>Гармонь</td>
<td>1</td>
</tr>
<tr>
<td>Балалайка</td>
<td>2</td>
</tr>
<tr>
<td>Гитара</td>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2">Валя</td>
<td>Скотч</td>
<td>2</td>
</tr>
<tr>
<td>Флешка</td>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3">Ира</td>
<td>Спички</td>
<td>3</td>
</tr>
<tr>
<td>Бычки</td>
<td>9</td>
</tr>
<tr>
<td>Штучки</td>
<td>5</td>
</tr>
</tbody>
</table>
Слово «шишка» начинается на «ши»!
Последний раз редактировалось Malleys, 09.01.2020 в 21:33.
|
|
27.01.2020, 11:34
|
|
Аспирант
|
|
Регистрация: 19.06.2018
Сообщений: 63
|
|
Malleys,
спасибо, всё получилось.
теперь возник ещё вопрос
как добиться того, чтобы при наведении курсора (hover) стили css не касались заголовка в таблице th?
В данном случае - нужно чтобы при наведении на заголовок не было красной рамки, а только на строках с именами
<style>
table {border-collapse: collapse;}
td, th {
border: 1px solid rgba(128, 128, 128, 0.25);
padding: 0.5em;
}
table > tbody > tr:first-child {background-color: #999;}
table tbody:nth-child(odd):hover {box-shadow: 0 0 0 2px red inset;}
table tbody:nth-child(even):hover {box-shadow: 0 0 0 2px blue inset;}
</style>
<table>
<tbody>
<th>
<td>Имя</td>
<td>Предмет</td>
<td>Кол-во</td>
</th>
<tr>
<td rowspan="4">Маша</td>
<td>Карандаш</td>
<td>1</td>
</tr>
<tr>
<td>Ручка</td>
<td>3</td>
</tr>
<tr>
<td>Блокнот</td>
<td>4</td>
</tr>
<tr>
<td>Прищепка</td>
<td>4</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3">Саша</td>
<td>Шишка</td>
<td>5</td>
</tr>
<tr>
<td>Мышка</td>
<td>1</td>
</tr>
<tr>
<td>Батарейка</td>
<td>6</td>
</tr>
</tbody>
</table>
Последний раз редактировалось tp-20, 27.01.2020 в 12:12.
|
|
27.01.2020, 12:17
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,156
|
|
tp-20,
формируйте таблицу по "человечески" и будет вам счастье. 
<style>
table {border-collapse: collapse;}
td, th {
border: 1px solid rgba(128, 128, 128, 0.25);
padding: 0.5em;
}
table > thead > tr:first-child {background-color: #999;}
table tbody:nth-child(odd):hover {box-shadow: 0 0 0 2px red inset;}
table tbody:nth-child(even):hover {box-shadow: 0 0 0 2px blue inset;}
</style>
<table>
<thead>
<tr>
<th>Имя</th>
<th>Предмет</th>
<th>Кол-во</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">Маша</td>
<td>Карандаш</td>
<td>1</td>
</tr>
<tr>
<td>Ручка</td>
<td>3</td>
</tr>
<tr>
<td>Блокнот</td>
<td>4</td>
</tr>
<tr>
<td>Прищепка</td>
<td>4</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3">Саша</td>
<td>Шишка</td>
<td>5</td>
</tr>
<tr>
<td>Мышка</td>
<td>1</td>
</tr>
<tr>
<td>Батарейка</td>
<td>6</td>
</tr>
</tbody>
</table>
|
|
27.01.2020, 12:30
|
|
Аспирант
|
|
Регистрация: 19.06.2018
Сообщений: 63
|
|
|
рони, спасибо! правда, как в 90е вернулся))
|
|
27.01.2020, 13:49
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,304
|
|
|
Сообщение от tp-20
|
|
как в 90е вернулся
|
Таблицы и сейчас работают, их никто не отменял... |
|
05.02.2020, 10:31
|
|
Аспирант
|
|
Регистрация: 19.06.2018
Сообщений: 63
|
|
Добрый день! Продолжение темы.
Здесь при адаптивной вёрстке мне нужно уменьшить шрифт некоторых колонок, т.к. текст не помещается.
Но при выборке ячеек нумерация TD сбивается.
Можно ли как-то решить это?
table > tbody > tr > td:nth-child(2) {
outline: 1px solid red;
font: 12px Arial;
color: blue;
}
 |
|
05.02.2020, 11:47
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
tp-20, в данном случае можно так...
table > tbody > tr > td:nth-last-of-type(2) {
outline: 1px solid red;
font: 12px Arial;
color: blue;
}
|
|
|
|
