表格行背景大小重复

Question

我正在尝试在表格行的底部创建一个渐进式边框，以指示下载进度。以下是我提出的建议：

table {
  border-collapse: collapse;
}

tr {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png") no-repeat 0% 100%;
  border: 1px solid red;
}

tr.progress-50 {
  background-size: 50% 1px;
}

tr.progress-25 {
  background-size: 25% 1px;
}

tr.progress-75 {
  background-size: 75% 1px;
}

<table>
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
      <th>Fourth</th>
      <th>Fifth</th>
    </tr>
  </thead>
  <tbody>
    <tr class="progress-50">
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      <td>1.4</td>
      <td>1.5</td>
    </tr>
    <tr class="progress-25">
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      <td>2.4</td>
      <td>2.5</td>
    </tr>
    <tr class="progress-75">
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
      <td>3.4</td>
      <td>3.5</td>
    </tr>
  </tbody>
</table>

不幸的是，我的tr背景样式似乎适用于tds。

为什么？如何避免这种行为？

我已经检查了可能的重复答案，但遗憾的是没有解决我的问题。

Answer 1

我建议在table而不是tr上设置背景，我可以看到Chrome和Firefox在tr上呈现的风格完全不同，但如果它们看起来相同，你在table上设置了它。

＆＃13;

＆＃13;

table {
  border-collapse: collapse;
  background: url("https://i.imgur.com/ElfCxIY.png") no-repeat 0% 100%;
  background-size: 50% 1px;
}

＆＃13;

<table>
  <tr>
    <td>First</td>
    <td>Second</td>
    <td>Third</td>
    <td>Fourth</td>
    <td>Fifth</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

修改

对于多个表格行，您可以将每个tr转换为display: table;，但这种情况会破坏表格布局，但是它仍然可以在相同的数据或单元格长度中工作，例如固定的表格布局。并且仍然可以为单元格声明width，只需要在每列中的每个单元格上应用它。

＆＃13;

＆＃13;

tr {
  display: table;
  width: 100%;
  border-collapse: collapse;
  /* table-layout: fixed; */
}
tbody tr {
  background: url("https://i.imgur.com/ElfCxIY.png") no-repeat 0% 100%;
}
.progress-50 {
  background-size: 50% 1px;
}
.progress-25 {
  background-size: 25% 1px;
}
.progress-75 {
  background-size: 75% 1px;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
      <th>Fourth</th>
      <th>Fifth</th>
    </tr>
  </thead>
  <tbody>
    <tr class="progress-50">
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      <td>1.4</td>
      <td>1.5</td>
    </tr>
    <tr class="progress-25">
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      <td>2.4</td>
      <td>2.5</td>
    </tr>
    <tr class="progress-75">
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
      <td>3.4</td>
      <td>3.5</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

使用linear-gradient()代替背景图片的示例，以及一些动画。

＆＃13;

＆＃13;

tr {
  display: table;
  width: 100%;
  border-collapse: collapse;
  /* table-layout: fixed; */
}
tbody tr {
  background: linear-gradient(blue 50%, blue 50%) no-repeat 0% 100%;
  background-size: 0 1px;
  animation-fill-mode: forwards;
}
.progress-50 {
  animation-name: p25;
  animation-duration: 1s;
}
.progress-25 {
  animation-name: p50;
  animation-duration: 2s;
}
.progress-75 {
  animation-name: p75;
  animation-duration: 3s;
}
@keyframes p25 {
  to {
    background-size: 25% 1px;
  }
}
@keyframes p50 {
  to {
    background-size: 50% 1px;
  }
}
@keyframes p75 {
  to {
    background-size: 75% 1px;
  }
}

＆＃13;

<table>
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
      <th>Fourth</th>
      <th>Fifth</th>
    </tr>
  </thead>
  <tbody>
    <tr class="progress-50">
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      <td>1.4</td>
      <td>1.5</td>
    </tr>
    <tr class="progress-25">
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      <td>2.4</td>
      <td>2.5</td>
    </tr>
    <tr class="progress-75">
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
      <td>3.4</td>
      <td>3.5</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我猜Chrome只是忽略了tr背景。我发现TR背景的唯一解决方案是使用内联属性，如：

primary key

希望你能做到。如果找到，请发布解决方案