为什么在表格中水平滚动时第一个粘性列的右边框消失了？

问题描述 投票：0回答：1

我有一个表格，我使用以下 CSS 将粘性定位应用于第一列：

th:first-child,
td:first-child {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    z-index: 1;
    left: 0;
    background: #fff;
}

虽然这成功地使第一列粘住，但在水平滚动时遇到问题：第一列的右边框消失了。我该如何解决这个问题？

这是我的 HTML 和 CSS 设置供参考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
        }

        .table-container {
            overflow: auto;
            border: solid;
            margin: auto;
        }

        table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
        }

        th,
        td {
            width: 20%;
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th:first-child,
        td:first-child {
            position: -webkit-sticky; /* for Safari */
            position: sticky;
            z-index: 1;
            left: 0;
            background: #fff;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                    <th>Column 4</th>
                    <th>Column 5</th>
                    <th>Column 6</th>
                    <th>Column 7</th>
                    <th>Column 8</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                    <td>Data 4</td>
                    <td>Data 5</td>
                    <td>Data 6</td>
                    <td>Data 7</td>
                    <td>Data 8</td>
                </tr>
                <!-- More rows as needed -->
            </tbody>
        </table>
    </div>
</body>
</html>

如何确保当我水平滚动表格时第一个粘性列的右边框保持可见？

html css
1个回答
0
投票

你可以尝试使用伪元素，添加以下CSS

我认为这就是窍门

th:first-child::after,
td:first-child::after {
  content: " ";
  background: #ddd;
  width: 1px;
  height: 100%;
  position: absolute;
  right: 0;
  top: -8px;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
        }
    
        .table-container {
            overflow: auto;
            border: solid;
            margin: auto;
        }

        table {
            width: 100%;
            min-width: 900px;            
            table-layout: fixed;
            border-collapse: collapse;
        }

        th,
        td {
            width: 20%;
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th:first-child,
        td:first-child {
            position: -webkit-sticky; /* for Safari */
            position: sticky;
            left: 0;
            z-index: 1;
            background: #fff;
            border-right: unset;            
        }
        th:first-child::after,
        td:first-child::after {
            content: " ";
            background: #ddd;
            width: 1px;
            height: 100%;
            position: absolute;
            right: 0;
            top: -8px;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                    <th>Column 4</th>
                    <th>Column 5</th>
                    <th>Column 6</th>
                    <th>Column 7</th>
                    <th>Column 8</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                    <td>Data 4</td>
                    <td>Data 5</td>
                    <td>Data 6</td>
                    <td>Data 7</td>
                    <td>Data 8</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                    <td>Data 4</td>
                    <td>Data 5</td>
                    <td>Data 6</td>
                    <td>Data 7</td>
                    <td>Data 8</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                    <td>Data 4</td>
                    <td>Data 5</td>
                    <td>Data 6</td>
                    <td>Data 7</td>
                    <td>Data 8</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                    <td>Data 4</td>
                    <td>Data 5</td>
                    <td>Data 6</td>
                    <td>Data 7</td>
                    <td>Data 8</td>
                </tr>                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                    <td>Data 3</td>
                    <td>Data 4</td>
                    <td>Data 5</td>
                    <td>Data 6</td>
                    <td>Data 7</td>
                    <td>Data 8</td>
                </tr>
                
                <!-- More rows as needed -->
            </tbody>
        </table>
    </div>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.