时间戳

首页 > 解决方案 > 如何从带有圆角的粘性表格标题中删除透明度，以便您看不到后面的单元格边框？

html - 如何从带有圆角的粘性表格标题中删除透明度，以便您看不到后面的单元格边框？

问题描述

我正在尝试创建一个带有粘性标题和圆角的表格。由于border-radius不起作用table，我将它们直接应用于thandtd单元格。

但是，当您滚动时，您可以看到th.

不知道怎么做，所以没有流血。

:root {
  --grid-gap: 5px;
  --padding: 5px;
  --left-column-width: 200px;
  --rigth-column-width: 100px;
  --color1: #ccc;
  --border-radius: 10px;
  --border-width: 2px;
}

.threads-list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: white;
}

.threads-list th,
.threads-list td {
  border-collapse: separate;
  border-spacing: 0;
  padding: var(--padding);
  border-width: 1px;
  border-color: var(--color1);
  border-color: var(--color1);
  border-style: none solid solid none;
}

.threads-list th {
  background-color: var(--color1);
  text-align: left;
  font-weight: bold;
  position: sticky;
  top: 0;
}

.threads-list th.wide {
  width: 100%;
}

.threads-list .right {
  text-align: right;
}

.threads-list thead tr:first-child th:first-child {
  border-width: 2px 1px 1px 2px;
  border-color: var(--color1);
  border-style: solid;
  border-top-left-radius: var(--border-radius);
}

.threads-list thead tr:first-child th {
  border-top: 2px solid var(--color1);
}

.threads-list thead tr:first-child th:last-child {
  border-width: 2px 2px 1px 0;
  border-color: var(--color1);
  border-style: solid;
  border-top-right-radius: var(--border-radius);
}

.threads-list tbody tr:last-child td:first-child {
  border-width: 0 1px 2px 2px;
  border-color: var(--color1);
  border-style: solid;
  border-bottom-left-radius: var(--border-radius);
}

.threads-list tbody tr:last-child td:last-child {
  border-width: 0 2px 2px 0;
  border-color: var(--color1);
  border-style: solid;
  border-bottom-right-radius: var(--border-radius);
}

.threads-list tbody tr:last-child td {
  border-bottom: 2px solid var(--color1);
}

.threads-list tbody tr td:first-child {
  border-left: 2px solid var(--color1);
}

.threads-list tbody tr td:last-child {
  border-right: 2px solid var(--color1);
}
<div>
  <table class="threads-list">
    <thead>
      <tr>
        <th></th>
        <th>Alpha</th>
        <th class="wide">Bravo</th>
        <th class="right">Charlie</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>a</td>
        <td>a</td>
        <td class="right">a</td>
      </tr>

    </tbody>
  </table>
</div>

标签： htmlcss

解决方案

注释给出了很好的建议，使用box-shadow负白色值来重叠滚动线的可见部分：

box-shadow: 0 -10px 0 0 #ffffff;

将白色背景变量添加--override-th-color: #ffffff到:root.

并将其添加到您的 CSS 中：

table thead tr:first-child th:first-child,
table thead tr:first-child th:last-child {
    box-shadow: 0 -10px 0 0 var(--override-th-color);
}

只有第一个和最后一个标签才需要这条规则th。

:root {
    --grid-gap: 5px;
    --padding: 5px;
    --left-column-width: 200px;
    --rigth-column-width: 100px;
    --color1: #ccc;
    --border-radius: 10px;
    --border-width: 2px;
    --override-th-color: #ffffff;
}

.threads-list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: white;
}

.threads-list th,
.threads-list td {
    border-collapse: separate;
    border-spacing: 0;
    padding: var(--padding);
    border-width: 1px;
    border-color: var(--color1);
    border-color: var(--color1);
    border-style: none solid solid none;
}

.threads-list th {
    background-color: var(--color1);
    text-align: left;
    font-weight: bold;
    position: sticky;
    top: 0;
}

.threads-list th.wide {
    width: 100%;
}

.threads-list .right {
    text-align: right;
}

.threads-list thead tr:first-child th:first-child {
    border-width: 2px 1px 1px 2px;
    border-color: var(--color1);
    border-style: solid;
    border-top-left-radius: var(--border-radius);
}

.threads-list thead tr:first-child th {
    border-top: 2px solid var(--color1);
}

.threads-list thead tr:first-child th:last-child {
    border-width: 2px 2px 1px 0;
    border-color: var(--color1);
    border-style: solid;
    border-top-right-radius: var(--border-radius);
}

.threads-list tbody tr:last-child td:first-child {
    border-width: 0 1px 2px 2px;
    border-color: var(--color1);
    border-style: solid;
    border-bottom-left-radius: var(--border-radius);
}

.threads-list tbody tr:last-child td:last-child {
    border-width: 0 2px 2px 0;
    border-color: var(--color1);
    border-style: solid;
    border-bottom-right-radius: var(--border-radius);
}

.threads-list tbody tr:last-child td {
    border-bottom: 2px solid var(--color1);
}

.threads-list tbody tr td:first-child {
    border-left: 2px solid var(--color1);
}

.threads-list tbody tr td:last-child {
    border-right: 2px solid var(--color1);
}

table thead tr:first-child th:first-child,
table thead tr:first-child th:last-child {
    box-shadow: 0 -10px 0 0 var(--override-th-color);
}
<div>
    <table class="threads-list">
        <thead>
            <tr>
                <th></th>
                <th>Alpha</th>
                <th class="wide">Bravo</th>
                <th class="right">Charlie</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>a</td>
                <td>a</td>
                <td class="right">a</td>
            </tr>
        </tbody>
    </table>
</div>

推荐阅读