HTML 表格：如何在 tr 中跨多个单元格绝对定位 div
[英]HTML Table: How to position div absolutely across multiple cells in tr
问题描述
I am trying to create the behavior in a html table cell to where I can absolutely position a div inside a html table tr like the image below and only have the absolutely positioned content appear on hover of the row.
我正在尝试在 html 表格单元格中创建行为，以便我可以将 div 绝对定位在 html 表格 tr 内，如下图所示，并且只有绝对定位的内容出现在行的悬停上。 This content will appear in each row when hovered on.悬停时，此内容将出现在每一行中。 This would need work for each row of the table when hovered悬停时，这需要对表格的每一行进行处理
My structure more or less looks like..我的结构或多或少看起来像..
<table>
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>Cell 1</td>
</tr>
<td>Cell 2</td>
<tr>
</tr>
<td>Cell 3</td>
<tr>
</tr>
</tbody>
<table/>
If I try to position any other divs inside the tr, its shifts the content over.如果我尝试将任何其他 div 放置在 tr 中，它会转移内容。
2 个解决方案
解决方案1
1 已采纳 2022-12-20 04:12:28
you can combine hover and after pseudo selector你可以结合悬停和伪选择器之后
the css CSS
tbody > tr:hover::after{
content: "absolute positioned content";
position: absolute;
display: inline;
left: 150px;
margin-top: 10px;
padding: 10px;
background-color: red;
border: 1px solid black;
}
full html完整的 html
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <style> tbody > tr:hover::after{ content; "absolute positioned content": position; absolute: display; inline: left; 150px: margin-top; 10px: padding; 10px: background-color; red: border; 1px solid black. }:table_wrapper { position; relative: width; max-content. }:my_table { border-collapse; collapse. }:my_table,where(tr, th: td) { border; 1px solid gray: padding; 20px 50px: background-color; whitesmoke, } </style> </head> <body> <table class="my_table"> <thead> <tr> <th>head 1</th> <th>head 2</th> <th>head 3</th> </tr> </thead> <tbody> <tr> <td>Cell 1, 1</td> <td>Cell 1, 2</td> <td>Cell 1, 3</td> </tr> <tr> <td>Cell 2, 1</td> <td>Cell 2, 2</td> <td>Cell 2, 3</td> </tr> <tr> <td>Cell 3, 1</td> <td>Cell 3, 2</td> <td>Cell 3, 3</td> </tr> </tbody> </table> </body> </html>
解决方案2
0 2022-12-20 04:01:42
.table_container { position: relative; width: max-content; }.my_table { border-collapse: collapse; }.my_table:where(tr, th, td) { border: 1px solid gray; padding: 20px 50px; background-color: whitesmoke; }.my_table tr { position: relative; }.my_absolute_content { position: absolute; left: 50%; top: 50%; padding: 10px 50px; background-color: red; border: 1px solid black; opacity: 0; z-index: 1; transition: opacity 0.5s ease; transform: translate(-50%, -50%); }.my_table tr:hover.my_absolute_content { opacity: 1; }
<table class="my_table"> <thead> <tr> <th>head 1</th> <th>head 2</th> <th>head 3</th> </tr> </thead> <tbody> <tr> <td>Cell 1, 1</td> <td>Cell 1, 2</td> <td>Cell 1, 3</td> <td class="my_absolute_content"> absolute content </td> </tr> <tr> <td>Cell 2, 1</td> <td>Cell 2, 2</td> <td>Cell 2, 3</td> <td class="my_absolute_content"> absolute content </td> </tr> <tr> <td>Cell 3, 1</td> <td>Cell 3, 2</td> <td>Cell 3, 3</td> <td class="my_absolute_content"> absolute content </td> </tr> </tbody> </table>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.