HTML固定标题列与表格头部代码示例

183 浏览量更新于2024-08-30 收藏 103KB PDF 举报

本文档主要介绍了如何在HTML中创建一个具有固定标题列和标题头的表格，并提供了一个具体的代码示例来实现这一功能。以下详细解释了实现这一效果的关键知识点： 1. **HTML结构**：开始部分定义了HTML文档的基本结构，使用`<!DOCTYPE html>`声明文档类型为XHTML 1.0 Transitional，以及`<html>`标签作为根元素。`xmlns`属性设置了XML命名空间，`<head>`标签内包含`<meta>`标签用于设定字符编码，确保正确显示文本，同时设置了页面标题`<title>`。 2. **CSS样式**： - `table`样式：设置了表格的边框合并（`border-collapse: collapse;`）和间距（`border-spacing: 0px;`），使表格更整洁。宽度设为100%，使得表格可以适应父容器，`border`属性为黑色实线边框。 - `td`（表格数据单元格）样式：定义了单元格的边框样式，包括1像素的黑色实线边框、高度、居中对齐内容，并设置左边界为0。 - `th`（表格标题单元格）样式：背景色、文字颜色、边框样式与`td`类似，但顶部和左边界都设置为0，且有特殊的背景颜色和字体颜色，通常用于突出显示表头。`white-space: nowrap;`保持标题在一行显示，`height`小于`td`以适应标题头的视觉设计。 - `.t_left`类：用于左侧固定的列，设置了宽度、高度、浮动和边框样式。 - `.t_r_content`类：代表右侧滚动区域，设置宽度为100%，背景色为白色，高度为220px，并启用滚动条以适应内容。 - `.cl_freeze`类：高度固定，用于冻结左侧列，隐藏超出内容，宽度与`.t_r_content`相同。 3. **响应式设计**：注释中的部分代码说明了高度差和宽度调整的重要性。例如，`.t_r_content`的高度和`.cl_freeze`的高度之间的差距是20px，可以根据需要进行调整。此外，为了保证左侧标题列在不同浏览器下的显示效果，使用了`width: auto`，但在Opera下可能存在问题，需要根据具体情况进行调整。右侧内容的实际宽度由`.t_r`和`.cl_freeze`的宽度之和决定。这篇文章提供了一套实现固定标题列和标题头的HTML表格的完整代码和相关样式，适合于需要创建响应式、具有一定交互性的网页表格布局。通过理解这些代码和样式，开发者可以灵活地应用于实际项目中，创建出符合需求的美观和功能性的表格。

html固定标题列、标题头固定标题列、标题头table具体实现代码具体实现代码

复制代码代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd”>

<head>

<title>固定标题列、标题头table</title>

<style>

table{border-collapse:collapse;border-spacing:0px; width:100%; border:#000 solid 0px;}

table td{border:1px solid #000;height:25px; text-align:center; border-left:0px;}

table th{ background:#edd3d4; color:#a10333; border:#000 solid 1px; white-space:nowrap; height:21px; border-

top:0px;border-left:0px;}

.t_left{width:30%; height:auto; float:left;border-top:1px solid #000;border-left:1px solid #000;}

/*t_r_content和cl_freeze高度相差20px，高度为外观显示高度，可根据情况调整*/

.t_r_content{width:100%; height:220px; background:#fff; overflow:auto;}

.cl_freeze{height:200px;overflow:hidden; width:100%;}

/* width 调整左边标题列宽度（左侧外观显示宽度）; 指定为width:auto 在Opera下显示有问题; height比 t_r_content 高度小

20px*/

/* width 宽度为右侧外观显示宽度实际显示宽度大小为“t_r”宽度加上“cl_freeze”宽度 */

/* 如果显示不正常，调整 t_r的width 使其和t_left的width之和小于100%；等于100%时会有问题*/

.t_r{width:69.5%; height:auto; float:left;border-top:1px solid #000; border-right:#000 solid 1px;}

.t_r table{width:1700px;}

.t_r_title{width:1720px;}/*宽度比 t_r table 大20px （至少大20，小了滚动条滑到右侧显示有问题）*/

.t_r_t{width:100%; overflow:hidden;}

.bordertop{ border-top:0px;}

</style>

function aa(){

var a=document.getElementById(“t_r_content”).scrollTop;

var b=document.getElementById(“t_r_content”).scrollLeft;

document.getElementById(“cl_freeze”).scrollTop=a;

document.getElementById(“t_r_t”).scrollLeft=b;

}

</script>

</head>

<body>

<table>

<tr>

</tr>

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38583286

粉丝: 2
资源: 936

HTML固定标题列与表格头部代码示例

固定html表(table)头的html/css/js源码

HTML 网页头部代码全清楚

导航菜单固定头部跟随屏幕滚动jQuery插件posfixed

uni-table 固定表头代码

html中的table固定列

css表格左侧栏为表头标题，且列可以拖动

vxe-table grid 拖动列

el-table如何实现自适应列宽

HTML如何把table到处为数据表

datatables 表格固定高度和拖动列宽的完整代码

最新资源