表格单元格渐变填充问题
当对表格单元格使用渐变填充时，我期望窗口调整大小时出现单元格边框的渲染问题，并且当使用纯色填充时无法观察到。
这是一张桌子，一些单元格使用渐变填充，其他单元格为纯色：
此暗缝仅在特定的窗口尺寸上可见，并非总是如此。
- 这是已知问题吗？
- 对此有任何破解吗？
更新：
这里是一个示例：https://codepen.io/zur4ik/pen/bmjLVp
尝试更改视图并在水平轴上调整大小
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #140B0A;
font-family: sans-serif;
}
.com-container {
width: 1540px;
margin: 0 auto;
}
.fx {
display: flex;
}
.fx.vc {
align-items: center;
}
.com-game-table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.com-game-table thead tr th {
background-color: #784B3E;
height: 60px;
font-weight: 300;
position: relative;
cursor: pointer;
}
.com-game-table thead tr th:hover {
background-color: #71473b;
}
.com-game-table thead tr th:first-child {
border-top-left-radius: 5px;
overflow: hidden;
}
.com-game-table thead tr th:last-child {
border-top-right-radius: 5px;
overflow: hidden;
}
.com-game-table tbody tr td {
height: 60px;
color: #000000;
background: #FBFBFB;
background: -moz-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: -webkit-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: linear-gradient(to bottom, #FBFBFB 0%, #EFEFEF 100%);
cursor: pointer;
border-collapse: collapse;
border: 0 transparent;
}
.com-game-table tbody tr td:first-child {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
overflow: hidden;
}
.com-game-table tbody tr td:last-child {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
overflow: hidden;
}
.com-game-table tbody tr td .status-cell {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 20px;
}
.com-game-table tbody tr td .status-cell .icon {
background-image: url("../img/tb-row-play-btn-icon.png");
background-repeat: no-repeat;
background-position: left 10px top 50%;
display: inline-block;
width: 27px;
height: 27px;
background-color: #ffffff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);
position: relative;
top: 1px;
margin-left: 10px;
}
.com-game-table tbody tr td.col-highlight {
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%);
background: -webkit-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%);
background: linear-gradient(to bottom, #eeeeee 0%, #e2e2e2 100%);
}
.com-game-table tbody tr.started td {
background: #30211F;
background: -moz-linear-gradient(top, #30211F 0%, #241715 100%);
background: -webkit-linear-gradient(top, #30211F 0%, #241715 100%);
background: linear-gradient(to bottom, #30211F 0%, #241715 100%);
color: #989291;
}
.com-game-table tbody tr.started td .com-icon {
opacity: .5;
}
.com-game-table tbody tr.started td .com-icon:hover {
opacity: 1;
}
.com-game-table tbody tr.started td .status-cell .icon {
background-image: url("../img/tb-row-view-btn-icon.png");
background-position: left 6px top 50%;
opacity: .7;
}
.com-game-table tbody tr.started td.col-highlight {
background: #2a1d1b;
background: -moz-linear-gradient(top, #2a1d1b 0%, #1e1311 100%);
background: -webkit-linear-gradient(top, #2a1d1b 0%, #1e1311 100%);
background: linear-gradient(to bottom, #2a1d1b 0%, #1e1311 100%);
}
.com-game-table tbody tr:hover td {
background: white;
background: -moz-linear-gradient(top, white 0%, #fcfcfc 100%);
background: -webkit-linear-gradient(top, white 0%, #fcfcfc 100%);
background: linear-gradient(to bottom, white 0%, #fcfcfc 100%);
}
.com-game-table tbody tr:hover.started td {
background: #332321;
background: -moz-linear-gradient(top, #332321 0%, #271917 100%);
background: -webkit-linear-gradient(top, #332321 0%, #271917 100%);
background: linear-gradient(to bottom, #332321 0%, #271917 100%);
}
.com-game-table tbody tr:hover.started td .status-cell .icon {
opacity: .8;
}
.com-game-table [data-type="tb-col-1"] {
width: 100px;
text-align: center;
}
.com-game-table [data-type="tb-col-2"] {
text-align: left;
padding-left: 15px;
}
.com-game-table [data-type="tb-col-3"] {
width: 110px;
text-align: center;
}
.com-game-table [data-type="tb-col-4"] {
width: 130px;
text-align: center;
}
.com-game-table [data-type="tb-col-5"] {
width: 160px;
text-align: center;
}
.com-game-table [data-type="tb-col-6"] {
width: 120px;
text-align: center;
}
.com-game-table [data-type="tb-col-7"] {
width: 80px;
text-align: center;
}
.com-game-table [data-type="tb-col-8"] {
width: 180px;
text-align: right;
}
main {
flex-grow: 1;
display: flex;
flex-flow: column;
min-height: 0;
width: 100%;
}
main .content {
display: flex;
flex-grow: 1;
align-items: stretch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 15px;
min-height: 0;
}
main .content .content-body {
flex-grow: 1;
padding-right: 15px;
display: flex;
}
main .content .content-body .table-wrapper {
display: flex;
flex-direction: column;
position: relative;
}
main .content .content-body .table-wrapper .table-header {
height: 60px;
position: absolute;
z-index: 2;
}
main .content .content-body .table-wrapper .table-header:after {
content: '';
display: block;
position: absolute;
width: 5px;
height: 5px;
background: #140B0A;
top: 0;
right: 25px;
z-index: 1;
}
main .content .content-body .table-wrapper .table-header .com-game-table {
position: relative;
z-index: 2;
}
main .content .content-body .table-wrapper .table-body {
overflow-y: hidden;
overflow-x: hidden;
flex: 1 1 auto;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
main .content .content-body .table-wrapper .table-body .table-body-inner {
padding-top: 60px;
}
main .content .content-body .table-wrapper .table-body .com-game-table {
border-spacing: 0;
}
main .content .content-body .table-wrapper .table-body .com-game-table tbody tr td .com-icon.tooltip {
cursor: help;
}<main>
<section class="content">
<div class="com-container fx">
<div class="content-body">
<div class="table-wrapper">
<div class="table-header">
<table class="com-game-table" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th data-type="tb-col-1">A</th>
<th data-type="tb-col-2">B</th>
<th data-type="tb-col-3">C</th>
<th data-type="tb-col-4">D</th>
<th data-type="tb-col-5">E</th>
<th data-type="tb-col-6">F</th>
<th data-type="tb-col-7">G</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<div class="table-body-inner">
<table class="com-game-table" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
1 个答案:
答案 0 :(得分：1)
我可以确定，这是Chrome和Edge中的亚像素舍入问题。 线性渐变的行为类似于背景图像，并在整个背景中进行细分。
我不清楚渲染引擎的确切行为，但是当无法将某些宽度整除时，会引入1px的间隙。
Firefox似乎没有遇到这个问题，因为我怀疑它会四舍五入。
WORKAROUND
我们无法摆脱在Chrome中创建的空白，但可以向最终用户隐藏事实。
- 将渐变应用于行而不是单元格。单元格需要保持透明。
- 应用“不重复”，这样背景渐变不会尝试正确平铺。
CSS
.com-game-table tbody tr {
background: #EFEFEF;
background: -moz-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: -webkit-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: linear-gradient(to bottom, #FBFBFB 0%, #EFEFEF 100%);
background-repeat: no-repeat;
}
示例
在下面的示例中，我对仅白色行应用了以下修复程序。
它将需要应用于其他颜色的行以及悬停效果。
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #140B0A;
font-family: sans-serif;
}
.com-container {
width: 1540px;
margin: 0 auto;
}
.fx {
display: flex;
}
.fx.vc {
align-items: center;
}
.com-game-table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.com-game-table thead tr th {
background-color: #784B3E;
height: 60px;
font-weight: 300;
position: relative;
cursor: pointer;
}
.com-game-table thead tr th:hover {
background-color: #71473b;
}
.com-game-table thead tr th:first-child {
border-top-left-radius: 5px;
overflow: hidden;
}
.com-game-table thead tr th:last-child {
border-top-right-radius: 5px;
overflow: hidden;
}
.com-game-table tbody tr {
background: #EFEFEF;
background: -moz-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: -webkit-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: linear-gradient(to bottom, #FBFBFB 0%, #EFEFEF 100%);
background-repeat: no-repeat;
}
.com-game-table tbody tr td {
height: 60px;
color: #000000;
cursor: pointer;
border-collapse: collapse;
border: 0 transparent;
}
.com-game-table tbody tr td:first-child {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
overflow: hidden;
}
.com-game-table tbody tr td:last-child {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
overflow: hidden;
}
.com-game-table tbody tr td .status-cell {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 20px;
}
.com-game-table tbody tr td .status-cell .icon {
background-image: url("../img/tb-row-play-btn-icon.png");
background-repeat: no-repeat;
background-position: left 10px top 50%;
display: inline-block;
width: 27px;
height: 27px;
background-color: #ffffff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);
position: relative;
top: 1px;
margin-left: 10px;
}
.com-game-table tbody tr td.col-highlight {
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%);
background: -webkit-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%);
background: linear-gradient(to bottom, #eeeeee 0%, #e2e2e2 100%);
}
.com-game-table tbody tr.started td {
background: #30211F;
background: -moz-linear-gradient(top, #30211F 0%, #241715 100%);
background: -webkit-linear-gradient(top, #30211F 0%, #241715 100%);
background: linear-gradient(to bottom, #30211F 0%, #241715 100%);
color: #989291;
}
.com-game-table tbody tr.started td .com-icon {
opacity: .5;
}
.com-game-table tbody tr.started td .com-icon:hover {
opacity: 1;
}
.com-game-table tbody tr.started td .status-cell .icon {
background-image: url("../img/tb-row-view-btn-icon.png");
background-position: left 6px top 50%;
opacity: .7;
}
.com-game-table tbody tr.started td.col-highlight {
background: #2a1d1b;
background: -moz-linear-gradient(top, #2a1d1b 0%, #1e1311 100%);
background: -webkit-linear-gradient(top, #2a1d1b 0%, #1e1311 100%);
background: linear-gradient(to bottom, #2a1d1b 0%, #1e1311 100%);
}
.com-game-table tbody tr:hover td {
background: white;
background: -moz-linear-gradient(top, white 0%, #fcfcfc 100%);
background: -webkit-linear-gradient(top, white 0%, #fcfcfc 100%);
background: linear-gradient(to bottom, white 0%, #fcfcfc 100%);
}
.com-game-table tbody tr:hover.started td {
background: #332321;
background: -moz-linear-gradient(top, #332321 0%, #271917 100%);
background: -webkit-linear-gradient(top, #332321 0%, #271917 100%);
background: linear-gradient(to bottom, #332321 0%, #271917 100%);
}
.com-game-table tbody tr:hover.started td .status-cell .icon {
opacity: .8;
}
.com-game-table [data-type="tb-col-1"] {
width: 100px;
text-align: center;
}
.com-game-table [data-type="tb-col-2"] {
text-align: left;
padding-left: 15px;
}
.com-game-table [data-type="tb-col-3"] {
width: 110px;
text-align: center;
}
.com-game-table [data-type="tb-col-4"] {
width: 130px;
text-align: center;
}
.com-game-table [data-type="tb-col-5"] {
width: 160px;
text-align: center;
}
.com-game-table [data-type="tb-col-6"] {
width: 120px;
text-align: center;
}
.com-game-table [data-type="tb-col-7"] {
width: 80px;
text-align: center;
}
.com-game-table [data-type="tb-col-8"] {
width: 180px;
text-align: right;
}
main {
flex-grow: 1;
display: flex;
flex-flow: column;
min-height: 0;
width: 100%;
}
main .content {
display: flex;
flex-grow: 1;
align-items: stretch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 15px;
min-height: 0;
}
main .content .content-body {
flex-grow: 1;
padding-right: 15px;
display: flex;
}
main .content .content-body .table-wrapper {
display: flex;
flex-direction: column;
position: relative;
}
main .content .content-body .table-wrapper .table-header {
height: 60px;
position: absolute;
z-index: 2;
}
main .content .content-body .table-wrapper .table-header:after {
content: '';
display: block;
position: absolute;
width: 5px;
height: 5px;
background: #140B0A;
top: 0;
right: 25px;
z-index: 1;
}
main .content .content-body .table-wrapper .table-header .com-game-table {
position: relative;
z-index: 2;
}
main .content .content-body .table-wrapper .table-body {
overflow-y: hidden;
overflow-x: hidden;
flex: 1 1 auto;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
main .content .content-body .table-wrapper .table-body .table-body-inner {
padding-top: 60px;
}
main .content .content-body .table-wrapper .table-body .com-game-table {
border-spacing: 0;
}
main .content .content-body .table-wrapper .table-body .com-game-table tbody tr td .com-icon.tooltip {
cursor: help;
}<main>
<section class="content">
<div class="com-container fx">
<div class="content-body">
<div class="table-wrapper">
<div class="table-header">
<table class="com-game-table" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th data-type="tb-col-1">A</th>
<th data-type="tb-col-2">B</th>
<th data-type="tb-col-3">C</th>
<th data-type="tb-col-4">D</th>
<th data-type="tb-col-5">E</th>
<th data-type="tb-col-6">F</th>
<th data-type="tb-col-7">G</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<div class="table-body-inner">
<table class="com-game-table" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？