HTML 修复了表格标题示例HTML

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 修复了表格标题示例HTML相关的知识，希望对你有一定的参考价值。

<html>
<head>
<title>jquery Fixed Table Header</title>
<style type="text/css">
    .scrollContainer{width: 400px; height: 100px; overflow:auto;}
    .scrollContainer table{width:100%;}
    .scrollContainer th{background:#ff9; border:1px solid #fc0;}
    .scrollContainer td{border:1px solid #9c0
</style>
<!---jquery script here--->
</head>
<body>
<div class="scrollContainer">
<table>
<thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
</tbody>
</table>
</div>
</body>
</html>

如果数据动态变化，如何修复 HTML 中表格行的背景颜色（静态）？

【中文标题】如果数据动态变化，如何修复 HTML 中表格行的背景颜色（静态）？【英文标题】：How to fix background-color(static) of table rows in HTML if the data changes dynamically? 【发布时间】：2020-12-06 07:38:39 【问题描述】：

我有一个订单表，订单进出，我必须修复整行的背景颜色（我的意思是每三行背景颜色在一个循环中变化）。 例如：

#orders tr:nth-child(3n+3) 
    background: #e7eff6;


#orders tr:nth-child(3n+4) 
    background: #d0e1f9;

    
#orders tr:nth-child(3n+2) 
    background: #adcbe3;

但是有一个问题，因为如果一个订单进入或者一个订单被取消和退出，那么行背景颜色将会改变，但我必须修复它并保持最初的颜色。

所以，我需要分隔行，这不是背景颜色所必需的，但如果数据动态变化，则必须修复它。

有人有想法吗？

【问题讨论】：

在生成行时，为它们分配一个类，该类将映射到 CSS 中定义的特定颜色。 它对我不起作用。如果我删除一个订单并刷新，下面的订单会继承被删除行的bg-color。 然后只使用一个类，该类映射到每行的一个永远不会改变的属性，例如它的id。例如，如果您想要最多三种不同的颜色，请使用 id % 3 生成三个唯一的类名之一，这对于该行将始终保持一致。 我明白了，但是在 JS 中我怎么能做到这一点？ 你不是在 JS 中做的，而是在 PHP 中做的。如果您显示用于生成行的代码，我可以向您展示如何修改它以使用行的 ID 来生成三个类名之一。 【参考方案1】：

您可以在 JS 中使用模数 % 在加载时为行设置背景颜色。 例如，如果你的表有 id=tableId，你可以运行类似的东西

let tableEl = document.getElementById("tableId");
let index = 0;
let colors = ["#e7eff6","#d0e1f9","#adcbe3"]
for (let trEl of tableEl.rows) 
    trEl.style.backgroundColor = colors[index % colors.length];
    index++;

【讨论】：

以上是关于HTML 修复了表格标题示例HTML的主要内容，如果未能解决你的问题，请参考以下文章

HTML, CSS , 带有修复标题的表格正文滚动

CSS 如何修复HTML表格标题1px Shift Bug

如果数据动态变化，如何修复 HTML 中表格行的背景颜色（静态）？

如何设置表格中的行高以在 python-docx 中修复？

html 表格第一行（第一个 <td>）与表格标题一起冻结

冻结 HTML 表格的多行多列