html - 表格单元格渐变填充问题

标签 html css html-table render gradient

当对表格单元格使用渐变填充时，我预计窗口调整大小时单元格边框会出现渲染问题，并且在使用纯色填充时无法观察到。

这是一张表格，一些单元格使用渐变填充，其他单元格使用纯色:

cell fill rendering issue

这个黑色间隙仅在特定的窗口大小下可见，并非总是如此。

  • 这是已知问题吗？
  • 有什么破解方法吗？

更新:

这是一个例子:https://codepen.io/zur4ik/pen/bmjLVp

尝试更改 View 并调整水平轴的大小

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>

最佳答案

好的，据我所知，这是 Chrome 和 Edge 中的亚像素舍入问题。 线性渐变的行为类似于背景图像，并在背景上进行镶嵌。

我不清楚渲染引擎的精确行为，但当某些宽度不可整除时，会引入 1px 间隙。

Firefox 似乎没有遇到这个问题，因为我怀疑它会四舍五入。

解决方法

我们无法消除 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>

关于html - 表格单元格渐变填充问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52925524/

上一篇：html - 悬停时的下拉菜单

下一篇：html - 向上滚动时无法让导航栏隐藏内容

相关文章：

CSS 选择器效率

CSS - 重复的背景图像应该完全可见

css - 在无限 CSS3 动画期间暂停

asp.net - HTML 表格无法在 IE9 中正确呈现

javascript - 在Javascript中访问表的行元素

javascript - 你什么时候想要更多/更少的http请求？

parent - 将 div 设置为不是 body 的父级的 100% 高度

javascript - 更改伪元素的样式::属性之后

javascript - 单击显示，双击隐藏 slider

javascript - 使用 JSON 对象制作 html 表

©2024 IT工具网  联系我们