Nodejs中table的td相对定位,费了N久搞定了样式问题 html代码
Nodejs中table的td相对定位,费了N久搞定了样式问题 html代码
#<div class=“table”> <div class=“header”> <div class=“header-title”>角色列表</div> <div class=“header-add”>+ 添加</div> <div class=“header-search”> <input id=“searchRole” placeholder=“搜索角色” /> <div class=“search-logo”></div> </div> </div> <table class=“body” cellspacing=“0” cellpadding=“0” border=“0”> <tbody> <tr class=“tr”> <td width=“6%”> <div class=“checkbox selected ml30”> <input type=“checkbox” /> </div> </td> <td width=“20%”> <div class="">角色名称</div> </td> <td width=“56%” class=“hoverTag”> <div class=“textl”>角色一</div> <!–tag–> <div class=“titTag”> <div class=“titTag-msg”>权限:<br />刷碗 策划 统计</div> <div class=“titTag-left”></div> </div> </td> <td width=“6%” > <div class=“canClick” >删除</div> </td> <td width=“10%” > <div class=“canClick textl”>编辑</div> </td> </tr> <tr class=“tr “> <td width=“6%”> <div class=“checkbox ml30”> <input type=“checkbox” /> </div> </td> <td width=“20%”> <div class=””>角色名称</div> </td> <td width=“56%” class=“hoverTag”> <div class=“textl”>角色二</div> <!–tag–> <div class=“titTag”> <div class=“titTag-msg”>权限:<br />账单 财务</div> <div class=“titTag-left”></div> </div> </td> <td width=“6%” > <div class=“canClick” >删除</div> </td> <td width=“10%” > <div class=“canClick textl”>编辑</div> </td> </tr> <tr class=“tr”> <td width=“6%”> <div class=“checkbox ml30”> <input type=“checkbox” /> </div> </td> <td width=“20%”> <div class="">角色名称</div> </td> <td width=“56%” class=“hoverTag”> <div class=“textl”>角色三</div> <!–tag–> <div class=“titTag”> <div class=“titTag-msg”>权限:<br />统计 账单 财务 刷碗 策划</div> <div class=“titTag-left”></div> </div> </td> <td width=“6%” > <div class=“canClick” >删除</div> </td> <td width=“10%” > <div class=“canClick textl”>编辑</div> </td> </tr>
</tbody>
</table>
</div>
]
-------第一个table的html----------
#<div class=“table2”> <table class=“body” cellspacing=“0” cellpadding=“0” border=“0”> <thead> <tr> <th width=“20%”>用户名</th> <th width=“61%”>用户类型</th> <th width=“10%”> </th> <th width=“9%”> </th>
</tr>
</thead>
<tbody>
<tr class="tr">
<td width="20%">
<div class="">anymo</div>
</td>
<td width="61%">
<div class="">OA</div>
</td>
<td width="10%">
<div class="canClick" >修改</div>
</td>
<td width="10%">
<div class="canClick textl">删除</div>
</td>
</tr>
<tr class="tr ">
<td width="20%">
<div class="">anymo</div>
</td>
<td width="61%">
<div class="">OA</div>
</td>
<td width="10%">
<div class="canClick" >修改</div>
</td>
<td width="10%">
<div class="canClick textl">删除</div>
</td>
</tr>
<tr class="tr">
<td width="20%">
<div class="">anymo</div>
</td>
<td width="61%">
<div class="">OA</div>
</td>
<td width="10%">
<div class="canClick" >修改</div>
</td>
<td width="10%">
<div class="canClick textl">删除</div>
</td>
</tr>
</tbody>
</table>
</div>
-------第二个table的html----------- 最外围是table或table2的DIV,编辑器的问题 无法显示出来 div class=“talbe”
在这个帖子中，我们将讨论如何使用HTML和CSS来实现<td>元素的相对定位，并解决相关的样式问题。我们将创建两个表格，每个表格都有一些特定的样式需求。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Relative Positioning</title>
<style>
.table {
width: 100%;
margin-bottom: 20px;
}
.table .header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f8f9fa;
padding: 10px;
}
.table .header .header-title {
font-size: 1.2em;
}
.table .header .header-add {
cursor: pointer;
}
.table .header .header-search {
display: flex;
align-items: center;
}
.table .header .header-search input {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.table .header .header-search .search-logo {
width: 20px;
height: 20px;
background-color: #ccc;
margin-left: 10px;
}
.table .body {
width: 100%;
}
.table .body .tr {
display: flex;
align-items: center;
border-bottom: 1px solid #ccc;
}
.table .body .tr td {
padding: 10px;
position: relative;
}
.table .body .tr .hoverTag:hover {
background-color: #e9ecef;
}
.table .body .tr .titTag {
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
}
</style>
</head>
<body>
<div class="table">
<div class="header">
<div class="header-title">角色列表</div>
<div class="header-add">+ 添加</div>
<div class="header-search">
<input id="searchRole" placeholder="搜索角色" />
<div class="search-logo"></div>
</div>
</div>
<table class="body" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="tr">
<td width="6%">
<div class="checkbox selected ml30">
<input type="checkbox" />
</div>
</td>
<td width="20%">
<div>角色名称</div>
</td>
<td width="56%" class="hoverTag">
<div class="textl">角色一</div>
<div class="titTag">
<div class="titTag-msg">权限:<br />刷碗 策划 统计</div>
<div class="titTag-left"></div>
</div>
</td>
<td width="6%">
<div class="canClick">删除</div>
</td>
<td width="10%">
<div class="canClick textl">编辑</div>
</td>
</tr>
<!-- 更多行 -->
</tbody>
</table>
</div>
<div class="table2">
<table class="body" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th width="20%">用户名</th>
<th width="61%">用户类型</th>
<th width="10%"></th>
<th width="9%"></th>
</tr>
</thead>
<tbody>
<tr class="tr">
<td width="20%">
<div>anymo</div>
</td>
<td width="61%">
<div>OA</div>
</td>
<td width="10%">
<div class="canClick">修改</div>
</td>
<td width="10%">
<div class="canClick textl">删除</div>
</td>
</tr>
<!-- 更多行 -->
</tbody>
</table>
</div>
</body>
</html>
解释
.table: 这个类用于定义表格的外部容器，设置宽度为100%，并添加底部边距。.header: 用于定义表格头部的样式，包含一个标题、一个添加按钮和一个搜索框。.header .header-search: 搜索框及其图标容器的样式。.body .tr: 表格行的样式，使用Flex布局确保子元素水平排列。.titTag: 使用绝对定位来显示权限信息，当鼠标悬停时显示。.hoverTag: 当鼠标悬停时改变背景颜色。
通过这些样式，我们实现了相对定位和一些基本的交互效果，如悬停显示权限信息。
根据你的描述，这个问题主要涉及HTML中的表格（<table>）元素的样式调整。你提到使用相对定位来解决样式问题。下面是一个简单的示例，展示如何使用CSS来对表格中的<td>进行相对定位。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table TD Relative Positioning</title>
<style>
.table {
width: 100%;
border-collapse: collapse;
}
.table td {
position: relative;
padding: 10px;
border: 1px solid #ddd;
}
.table .checkbox {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.table .canClick {
cursor: pointer;
color: blue;
}
</style>
</head>
<body>
<div class="table">
<table class="body" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="tr">
<td width="6%">
<div class="checkbox ml30">
<input type="checkbox" />
</div>
</td>
<td width="20%">
角色名称
</td>
<td width="56%" class="hoverTag">
角色一
<div class="titTag">
<div class="titTag-msg">权限:<br />刷碗 策划 统计</div>
<div class="titTag-left"></div>
</div>
</td>
<td width="6%">
<div class="canClick">删除</div>
</td>
<td width="10%">
<div class="canClick textl">编辑</div>
</td>
</tr>
<!-- 更多行 -->
</tbody>
</table>
</div>
</body>
</html>
解释
在这个示例中：
.table td是所有表格单元格的基本样式。.table .checkbox使用绝对定位，使得复选框在表格单元格内部水平居中且垂直居中。.table .canClick类用于让删除和编辑按钮具有点击效果。
通过这种方式，你可以更灵活地控制表格内部元素的位置和样式。如果你有更具体的样式需求，可以进一步调整CSS。
