Nodejs table的td相对定位,费了N久搞定了样式问题 css代码（为了做小提示的小功能,用来相对定位）

/table 两个table样式 table,table2/ .table,.table2 { overflow:hidden;

} .table > .header { position:relative; height:40px; background-color:#84a9cc; } .header > .header-title { margin:0 auto;line-height:40px;color:#fff;width:80px;text-align: center;font-size:14px; } .header > .header-add { background-color: #488FD2; color: #FFFFFF; cursor: pointer; height: 20px; line-height: 20px; padding: 10px; position: absolute; right: 0; text-align: center; top: 0; width: 45px; } .header > .header-search { background-color: #fff; height: 30px; line-height: 20px; position: absolute; right: 80px; text-align: center; top: 5px; width: 200px; } .table > .body,.table2 > .body { border: 1px solid #BCC6D0;/border-style:none solid solid solid;/background-color:#fff; } .header-search > input { border:none; border-right: 1px solid #BCC6D0; color: #666666; font-size: 14px; height: 100%; line-height: 100%; width: 170px; float:left; } .header-search > .search-logo { float:left;width:29px;height:30px; background:url(…/…/images/global/serachBlue.png) center no-repeat; } tbody > .tr { height:20px;line-height:20px; } th { display:inline-block;margin-right:-3px; } th + th { margin-left:-3px; } td { padding:10px 0;display: inline-block;margin-right: -3px; } td + td { margin-left: -3px; } tbody > .tr:nth-child(2n+1) { background-color:#e6e5e5; } .table2 tbody > .tr:nth-child(2n+1) { background-color:#fff; } .ml30 { margin-left:30px; } .tr .checkbox { width:20px;border:1px solid #BCC6D0;height:20px;cursor:pointer;float:left; } .tr .checkbox.selected { background-color:#488FD2; } .tr .checkbox > input[type=‘checkbox’] { display:none; } table.body,table2.body { width:100%; overflow-y:auto; } .body { margin:0; } td, td div { font-size:14px;text-align: center; } .canClick { color:#2E5CB9;cursor:pointer; }

.btn { background-color: #488FD2; color: #FFFFFF; cursor: pointer; font-size: 14px; padding: 6px 10px;

} .line > .submit { float:right;padding:10px 25px; } .btnPush > .tagRight { background: url("…/…/images/global/smallGotoRight.png") no-repeat scroll center center #9EC5EB; float: left; height: 85px; width: 8px; } .opcity5 { opacity:0.5; filter:alpha(opacity=50); }

.search { background-color: #FFFFFF; height: 30px; line-height: 20px;

text-align: center;
width: 210px;

} .search > input { border:none; border: 1px solid #BCC6D0; color: #666666; font-size: 14px; height: 28px; line-height: 100%; width: 170px; float:left; } .search > .search-logo { float:left;width:29px;height:30px; background:url(…/…/images/global/searchWhite.png) center no-repeat #488FD2; } .tableRight { float:left;margin-left:20px;width: 962px; } .btnLeft { float:left; }

th { font-size: 14px; font-weight: normal; line-height: 35px; height:35px; } .textl { text-align: left; } .table2 td { border-top:1px solid #BCC6D0; } .hoverTag { cursor:pointer;position: relative; } .titTag { min-width:135px;height:50px;display:none;position:absolute; } .titTag > .titTag-left, .titTag > .titTag-msg { float:right; } .titTag > .titTag-left { width:15px; height:100%; } .titTag > .titTag-msg { background-color:#fcffe0;min-width:119px;border:1px solid #BCC6D0;height:48px;text-align:left; }

wuwangju 1楼

好的，我将根据你的要求提供一个关于Node.js中使用CSS实现表格<td>元素相对定位的示例。这个例子将展示如何通过CSS来创建一个小提示功能，当鼠标悬停在特定的表格单元格时显示额外的信息。

示例代码

首先，我们定义HTML结构：

<table class="table">
    <thead class="header">
        <tr>
            <th>名称</th>
            <th>描述</th>
        </tr>
    </thead>
    <tbody class="body">
        <tr>
            <td class="hoverTag" data-tip="这是第一个单元格的小提示信息">
                单元格1
            </td>
            <td class="hoverTag" data-tip="这是第二个单元格的小提示信息">
                单元格2
            </td>
        </tr>
    </tbody>
</table>

接下来是CSS样式：

.table {
    width: 100%;
    overflow-x: auto;
}

.header {
    position: relative;
    height: 40px;
    background-color: #84a9cc;
}

.header th {
    margin: 0 auto;
    line-height: 40px;
    color: #fff;
    width: 80px;
    text-align: center;
    font-size: 14px;
}

.body {
    border: 1px solid #BCC6D0;
    background-color: #fff;
}

td {
    padding: 10px 0;
    display: inline-block;
    margin-right: -3px;
    position: relative;
}

.hoverTag {
    cursor: pointer;
    position: relative;
}

.titTag {
    min-width: 135px;
    height: 50px;
    display: none;
    position: absolute;
    background-color: #fcffe0;
    border: 1px solid #BCC6D0;
    text-align: left;
    z-index: 1000;
}

.titTag-left {
    width: 15px;
    height: 100%;
}

.titTag-msg {
    min-width: 119px;
    height: 48px;
}

.hoverTag:hover .titTag {
    display: block;
}

解释

HTML结构：我们创建了一个简单的表格，其中每个<td>标签都有一个data-tip属性，用于存储提示信息。
CSS样式：
- .table 和 .header 设置了基本的表格样式。
- td 元素被设置为相对定位 (position: relative)，以便在其内部创建绝对定位的提示框。
- .hoverTag 类用于识别需要显示提示信息的单元格。
- .titTag 类定义了提示框的基本样式，并初始设置为隐藏 (display: none)。
- 使用:hover伪类来显示提示框，当用户悬停在.hoverTag上时，提示框会显示出来。

这样，当你将鼠标悬停在表格的某个单元格上时，就会显示一个包含该单元格数据提示的小框。希望这能解决你遇到的问题！

zlyuanteng 2楼

针对你的问题，你希望实现一个在 td 元素上添加小提示的功能，并且需要使用相对定位。以下是一个简单的示例，展示如何在 td 中使用绝对定位来创建一个小提示。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Tooltip Example</title>
    <style>
        .table {
            overflow: hidden;
            border-collapse: collapse;
        }

        .table td {
            position: relative;
            padding: 10px 0;
            display: inline-block;
            margin-right: -3px;
        }

        .table td:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: #fff;
            padding: 5px;
            border-radius: 3px;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .table td:hover::after {
            opacity: 1;
        }
    </style>
</head>
<body>
    <table class="table">
        <tr>
            <td data-tooltip="这是小提示">数据1</td>
            <td data-tooltip="这是另一个小提示">数据2</td>
        </tr>
    </table>
</body>
</html>

解释

CSS 样式:
- td 设置了 position: relative，这使得 ::after 伪元素可以相对于它进行绝对定位。
- ::after 伪元素在 td 元素上显示，并在鼠标悬停时显示一个小提示。
- 使用 content: attr(data-tooltip) 动态获取 data-tooltip 属性的值作为提示内容。
- 提示框的位置设置为在 td 元素的正下方，并居中显示。
HTML 结构:
- 每个 td 元素包含了一个 data-tooltip 属性，用于存储提示文本。

以上代码可以在任何支持现代 CSS 的浏览器中运行。你可以根据自己的需求调整样式。