Укладка tr в один стол
Я пытаюсь сложить tr в одну таблицу, используя z-index, но мне не повезло. Я не могу изменить / добавить саму структуру, поэтому, если не используется ванильный javascript или CSS, мои руки связаны. В моем сценарии мне нужно, чтобы 3-е тр было позади двух верхних тр.
table {
position: relative;
z-index: 100;
}
table tr:nth-child(3) {
position: relative;
z-index: 1;
}
table tr:nth-child(1),
table tr:nth-child(2) {
position: fixed;
z-index: 100;
}<table>
<tr>
<td>
// Content
</td>
</tr>
<tr>
<td>
// Content
</td>
</tr>
<tr>
<td>
// Content needs to flow behind the other two on scrolling
</td>
</tr>
</table>
Ответы 3
Если я не понимаю проблему неправильно, я думаю, это то, чего вы хотите достичь?
https://codepen.io/littlefinger42/pen/vvXbPZ
Я не менял ни один из ваших CSS, но я исправил ваш HTML. Элементы <tr> требуют в качестве дочерних элементов <td> или <tr>.
td теги есть, я просто не добавлял их сюда
@Keith Код - это не то, чего вы пытаетесь достичь? Я вижу три ряда таблицы друг над другом.
Попробуйте поместить свой контент в td:
<style type = "text/css">
table {
position: relative;
z-index: 100;
}
table tr:nth-child(3) {
position: relative;
z-index: 1;
}
table tr:nth-child(1), table tr:nth-child(2) {
position: fixed;
z-index: 100;
}
</style> <table>
<tr>
<td>
// Content
</td>
</tr>
<tr><td>
// Content
</td>
</tr>
<tr> <td>
// Content needs to flow behind the other two on scrolling
</td>
</tr>
</table>Таблицы немного сложно стилизовать, потому что они не являются типичным элементом display: block, как большинство html. Вместо этого они по умолчанию - display: table, table-row, table-cell.
Чтобы заставить работать слои z-index, вам нужно дать <tr>display: block, а также убедиться, что вы включили свои <td> в <tr>, чтобы сохранить семантику. Тогда вы сможете добиться того, чем хотите.
table{ }
table tr { position: relative; display: block; z-index: 1; }
table tr:nth-child(1) { background: yellow; }
table tr:nth-child(2) { background: skyblue; }
table tr:nth-child(3) { background: lime; z-index: -1; transform: translateY(-50%); }<table>
<tr>
<td>td// Content</td>
</tr>
<tr>
<td>td// Content</td>
</tr>
<tr>
<td>// Content needs to flow behind the other two on scrolling</td>
</tr>
</table>
почему-то само получилось, используя то, что у меня есть. Я не понимаю в чем разница