CSS固定表格首行与前两列时边框丢失问题求助

你的问题主要出在三个地方：border属性写法错误、sticky元素层级不足、表格容器的overflow设置不当。以下是具体修复方案：

核心修复点 #

• 修正无效的border属性：你代码里写的border-color: 1px solid black;是错误的，border-color只负责颜色，边框宽度和样式要通过border-width、border-style或者border简写来设置。
• 提升固定列的z-index：确保固定列的层级高于普通单元格，避免边框被遮挡。
• 给固定列明确设置左右边框：尤其是第二列（stage_col）要设置左侧边框，防止滚动时和第一列的边框重叠消失；同时给第一列设置右侧边框，第二列设置右侧边框，保证分隔清晰。
• 调整表格容器结构：table本身设置overflow无效，需要把表格放在一个带overflow: auto的容器里，才能实现滚动效果。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta name="xx" content="HTML" />
    <title>testing</title>
    <style type="text/css">
        /* 滚动容器 */
        .table-container {
            width: 400px;
            overflow: auto;
        }
        table.sample {
            border: thin ridge black;
            border-collapse: collapse;
            background-color: lightyellow;
            text-align: center;
            word-break: break-all;
            table-layout: fixed;
            width: 100%;
        }
        table.sample th {
            border: 2px ridge black;
            padding: 3px;
            background-color: aqua;
            border-radius: 3px;
            text-align: center;
            word-break: break-all;
        }
        table.sample td {
            border: 2px ridge black;
            padding: 3px;
            border-radius: 3px;
            text-align: center;
            word-break: break-all;
        }
        thead th {
            top: 0;
            position: sticky;
            z-index: 20;
            background-color: aqua;
        }
        .category_col {
            left: 0;
            position: sticky;
            background-color: lightyellow;
            z-index: 10;
            /* 明确左右边框 */
            border-left: 2px ridge black !important;
            border-right: 2px ridge black !important;
        }
        .stage_col {
            left: 150px;
            position: sticky;
            background-color: lightyellow;
            z-index: 10;
            /* 明确左侧边框，避免被第一列遮挡 */
            border-left: 2px ridge black !important;
            border-right: 2px ridge black !important;
        }
        .fixed_header {
            z-index: 30;
        }
    </style>
</head>
<body bgcolor="aliceblue">
    <center><h1>testing</h1></center>
    <font color="brown"><b>
    <div class="table-container">
        <table class="sample">
            <thead>
                <tr>
                    <th width="150" class="category_col fixed_header">Category</th>
                    <th width="150" class="stage_col fixed_header"><font color="brown">Stages </font></th> 
                    <th width="350"> a </th> 
                    <th width="350"> b </th> 
                    <th width="350"> c </th> 
                    <th width="350"> d </th> 
                    <th width="350"> e </th> 
                    <th width="350"> f </th> 
                    <th width="350"> g </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="category_col" scope="row" rowspan="8"><b>Info</b></td>
                    <td class="stage_col" scope="row"><b>Stage 1</b></td>
                    <td>x</td>
                    <td>x</td>
                    <td>x</td>
                    <td>x</td>
                    <td>x</td>
                    <td>x</td>
                    <td>x</td>
                </tr>
                <tr>
                    <td class="stage_col" scope="row"><b>Stage2</b></td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                </tr>
                <tr>
                    <td class="stage_col" scope="row"><b>Stage3</b></td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                </tr>
                <tr>
                    <td class="stage_col" scope="row"><b>Stage4</b></td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                </tr>
                <tr>
                    <td class="stage_col" scope="row"><b>Stage5</b></td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                </tr>
                <tr>
                    <td class="stage_col" scope="row"><b>Stage6</b></td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                </tr>       
                <tr>
                    <td class="stage_col" scope="row"><b>Stage7</b></td>
                    <td>x</td>
                    <td>x</td>
                    <td>x</td>
                    <td>x</td>
                    <td>x</td>
                    <td>x</td>
                    <td>x</td>
                </tr>
                <tr>
                    <td class="stage_col" scope="row"><b>Stage8</b></td>
                    <td>y</td>
                    <td>y</td>
                    <td>y</td>
                    <td>y</td>
                    <td>y</td>
                    <td>y</td>
                    <td>y</td>
                </tr> 
            </tbody>
        </table>
    </div>
    </b></font>
    <br><br>
</body>
</html>

额外说明 #

• 新增了.table-container容器，把table包起来，确保滚动效果正常（table本身设置overflow不生效）。
• 用!important强制固定列的边框优先级，避免被其他样式覆盖。
• 修正了原HTML里未闭合的<td>标签（比如Stage1的td没闭合），这会导致渲染异常。

内容的提问来源于stack exchange，提问作者Blurman