边框样式不适用于粘性位置元素

Question

边框样式不适用于粘性位置元素

我不知道为什么我的边框样式不适用于position: sticky;属性.我想在我的粘性表头上设置边框样式.但我不想使用透明的背景色.我怎样才能实现它？以下是我的问题和JSFiddle链接的示例代码

#wrapper {
  width: 400px;
  height: 200px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

table tr th,
table tr td {
  border: 2px solid;
}

table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #edecec;
}

Run Code Online (Sandbox Code Playgroud)

<div id="wrapper">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
      <td>6</td>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>7</td>
      <td>7</td>
      <td>7</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tbody>
    </tbody>
  </table>
</div>

Run Code Online (Sandbox Code Playgroud)

下面是我想要的截图以及不清楚我的问题的截图.

你可以看到内联边框样式th不起作用(删除positioncss的属性,你会看到周围的boders.).

向下滚动一点.你会看到所有的边框风格都消失了.

Answer 1

小智 29

由于使用出现问题border-collapse: collapse。当浏览器折叠边框时，<th>必须将的顶部和底部边框应用于周围的元素-的顶部边框<table>和的底部边框<tr>。

如果您使用border-collapse: separate边框并将边框设置为一侧，则边框将真正附着在上<th>，如预期那样保持固定，并显示为已折叠。

以下是可以应用于您的HTML代码段的示例样式。

#wrapper {
  width: 400px;
  height: 200px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;
}

table th {
  /* Apply both top and bottom borders to the <th> */
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table td {
  /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
  border-bottom: 2px solid;
  border-right: 2px solid;
}

table th:first-child,
table td:first-child {
  /* Apply a left border on the first <td> or <th> in a row */
  border-left: 2px solid;
}

table thead th {
  position: sticky;
  top: 0;
  background-color: #edecec;
}

Run Code Online (Sandbox Code Playgroud)

在我看来，没有必要添加这么多的 css 类，您唯一需要添加的一件事是： table { border-collapse: alone; 边框间距：0；} (14认同)
是的，但是当我使用它时，沿未使用的边界边似乎有一个像素间隙 (10认同)
不幸的是，不能将此解决方案用于引导样式表，因为它使用“border-collapse：collapse”：/。不过，建议使用 box-shadow 的答案是有效的。 (4认同)
这种方法从根本上解决了问题，并且易于理解。我认为这比使用伪类更可取。 (3认同)

Answer 2

sou*_*ned 13

因为粘性定位在相对定位和固定定位之间波动，所以我能想到的绕过这种开箱即用的唯一方法是利用伪类。

我确信有一种更优雅的方式来实现这一点，但我只会改变:after和:beforepsuedo 类来为边框提供绝对定位。

#wrapper {
  width: 400px;
  height: 200px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

table tr th,
table tr td {
  border: 2px solid;
}

table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
  background-color: #edecec;
}
th:after,
th:before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}
th:before {
  top: 0;
  border-top: 3px solid blue;
}
th:after {
  bottom: 0;
  border-bottom: 3px solid blue;
}

Run Code Online (Sandbox Code Playgroud)

<div id="wrapper">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
      <td>6</td>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>7</td>
      <td>7</td>
      <td>7</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tbody>
    </tbody>
  </table>
</div>

Run Code Online (Sandbox Code Playgroud)

Answer 3

小智 9

<td style="position: sticky;
           top: 0;
           left: 0;
           right: 0;
           padding: 4px 3px;
           background-color: #d3d3d3;
           box-shadow: inset 0 1px 0 black, inset 0 -1px 0 black;">
</td>

Run Code Online (Sandbox Code Playgroud)

使用这个 100% 工作

Answer 4

Kou*_*out 9

border替换为怎么样outline？我敢说，特别是对于表格元素，其outline行为几乎与相同border。我知道它不是开箱即用的模型等，但视觉上是相同的。尝试这个：

table tr th,
table tr td {
  border: 0; 
  outline: 2px solid;
}

Run Code Online (Sandbox Code Playgroud)

这是演示这种方法的实时片段：

#wrapper {
  width: 100%;
  height: 150px;
  overflow: auto;
}
table {
  width: 100%;
  text-align: center;
}
table thead {
  position: sticky;
  top: 2px; /* Must match the outline width */
  background-color: #edecec;
}
table tr th,
table tr td {
  border: 0; 
  outline: 2px solid;
}

Run Code Online (Sandbox Code Playgroud)

<div id="wrapper">
  <table>
    <thead>
      <tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
    </thead>
    <tbody>
      <tr><td>0</td><td>0</td><td>0</td><td>0</td></tr>
      <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
      <tr><td>2</td><td>2</td><td>2</td><td>2</td></tr>
      <tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
      <tr><td>4</td><td>4</td><td>4</td><td>4</td></tr>
      <tr><td>5</td><td>5</td><td>5</td><td>5</td></tr>
      <tr><td>6</td><td>6</td><td>6</td><td>6</td></tr>
      <tr><td>7</td><td>7</td><td>7</td><td>7</td></tr>
      <tr><td>8</td><td>8</td><td>8</td><td>8</td></tr>
      <tr><td>9</td><td>9</td><td>9</td><td>9</td></tr>
    </tbody>
  </table>
</div>

Run Code Online (Sandbox Code Playgroud)

请记住，outline始终围绕整个元素进行渲染，没有什么类似的outline-left，所以它不是灵丹妙药。有关更多详细信息，请参阅MDN 上的概述。

更新：嗯，我忽略了一个细节，轮廓与边框没有正确对齐tbody。您必须要么交换整个表的border和，要么使用并推动，但也许这不是一个好方法（当然，这取决于情况）。outlinetransformthead

我也想发这个，然后发现了你的。这仅在“非常”特定的情况下才能正常工作 - 或者如果你可以恐吓它看起来不错 - 但当你处于这些情况下时，这是一个很棒的解决方案。 (2认同)

Answer 5

小智 6

您需要使用box-shadowproperty而不是border-top/ border-bottom。此外，您需要删除表格的ad和表格第一行的上下边框。

#wrapper {
                width : 400px;
                height : 200px;
                overflow : auto;
            }
            table {
                width : 100%;
                text-align : center;
                border-collapse : collapse;
            }
            table tr th, table tr td {
                border : 2px solid;
            }
            table thead th {
                position: -webkit-sticky;
                position : sticky;
                top : 0;
                background-color : #edecec;
            }
            /* here is the trick */
            table tbody:nth-of-type(1) tr:nth-of-type(1) td {
                border-top: none !important;
            }
            table thead th {
                border-top: none !important;
                border-bottom: none !important;
                box-shadow: inset 0 2px 0 #000000,
                            inset 0 -2px 0 #000000;
                padding: 2px 0;
            }

Run Code Online (Sandbox Code Playgroud)

<body>
        <div id="wrapper">
            <table>
                <thead>
                    <tr>
                        <th>A</th>
                        <th>B</th>
                        <th>C</th>
                        <th>D</th>
                        <th>E</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                    </tr>   
                    <tr>
                        <td>9</td>
                        <td>9</td>
                        <td>9</td>
                        <td>9</td>
                        <td>9</td>
                    </tr>               
                </tbody>
            </table>
        </div>
    </body>

Run Code Online (Sandbox Code Playgroud)

Answer 6

Aya*_*yan 5

使用::after伪选择器来模拟右边框

例子：

th::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-right: 1px solid #e7e7e7;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，5 月前
查看次数：	8592 次
最近记录：	5 年，11 月前