gpt4 book ai didi

css - 在表格单元格 html5 中定义对象

转载 作者:行者123 更新时间:2023-11-28 15:55:42 25 4
gpt4 key购买 nike

我想要实现的是创建一个对象或可以帮助我从不同单元格中选择数据的东西。在这个例子中(见下图)我试图把一些隐藏的物体放在红点的位置。然后,此按钮将激活四个最近的单元格。我不需要激活脚本,我只是不知道在 html 中放置此对象的最明智的做法是什么。你能告诉我怎么做吗?谢谢。

代码:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>

Example picture

最佳答案

可以定位对象。不确定点击事件。

table,
th,
td {
border: 1px solid black;
}
td {
position: relative;
}
td .click {
position: absolute;
width: 20px;
height: 20px;
background: black;
border-radius: 100%;
left: -10px;
top: -10px;
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td><a class="click"></a>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

关于css - 在表格单元格 html5 中定义对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41188812/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com