CSS实现固定表头 HTML表格_css 固定表头-优快云博客

本文链接：https://blog.youkuaiyun.com/sunyujia/article/details/2095999

本文介绍了一种针对Internet Explorer浏览器的表格实现方案，通过调整CSS样式来优化表格滚动时头部固定的效果，并解决了同态构建表格时出现的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title></title>
<link rel="stylesheet" href="demo.css" type="text/css">
</head>
<body>
<p>这段空间的高度会自动计算</p>
<div id="lockedDiv">
<table  width="100%" border="0" cellspacing="0">
  <tr>
    <th>a</th>
    <th>b</th>
    <th>c</th>
    <th>d</th>
    <th>e</th>
    <th>f</th>
    <th>g</th>
  </tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
</table>
</div>
</body>
</html>

BODY {
    overflow-y:auto;
}

div#lockedDiv{
    width: 100%;
    height: expression(document.body.offsetHeight-document.getElementById("lockedDiv").offsetTop-25);
    overflow: auto;
}
div#lockedDiv table th, th.locked{
    position:relative;
    top: expression(document.getElementById("lockedDiv").scrollTop);
    z-index: 20;
    font-family: "宋体";
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    height: 22px;
    background-color: #DAECC8;
    white-space: nowrap;
    border-left: 1px solid silver;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
}
div#lockedDiv table{
    border-right: 1px solid silver;
}
div#lockedDiv table TD {
    height: 22px;
    font-family: "宋体", "Arial", "Helvetica";
    font-size: 12px;
    border-left: 1px solid silver;
    border-bottom: 1px solid silver;
}

最近发现在一些特定条件下,诸如同态构建表格的时候,会有问题所以稍微改动了一下

BODY {
    overflow-y:auto;
}

div#lockedDiv{
    overflow: auto;
    position:absolute;
    padding:0;
    margin:0;
    width: expression(document.body.offsetWidth-16);
    height: expression(document.body.offsetHeight-document.getElementById("lockedDiv").offsetTop-25);
}
div#lockedDiv table th{
    position:relative;
    top: expression(document.getElementById("lockedDiv").scrollTop); /*IE5+ only*/
    z-index: 20;
    font-family: "宋体", "Arial", "Helvetica";
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    height: 22px;
    background-color: #DAECC8;
    white-space: nowrap;
    border-left: 1px solid silver;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
}
div#lockedDiv table{
    margin:0;
    border-right: 1px solid silver;
}
div#lockedDiv table TD {
    height: 22px;
    font-family: "宋体", "Arial", "Helvetica";
    font-size: 12px;
    border-left: 1px solid silver;
    border-bottom: 1px solid silver;
}
div#lockedDiv table TD.STD {
    height: 22px;
    font-family: "宋体", "Arial", "Helvetica";
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    background-color: #DAECC8;
    text-align: center;
    border-left: 1px solid silver;
    border-bottom: 1px solid silver;
}