Question

我用文字解释这个有点复杂，所以请看

table {
  border-collapse: collapse;
}

table>tbody td {
  border: solid 1px #00000062;
  width: 47px;
  height: 34px;
  text-align: center;
}

#t1 td.locked {
  background: repeating-linear-gradient(-45deg, transparent, transparent 7px, #00000035 7px, #00000035 14px);
}


/**
 *  I have no success with this   
 */

#t1 td.locked:nth-child(odd) {
  background-position-y: 0px;
}

#t2 td {
  width: 45px;
  height: 25px;
}

#t2 td.locked {
  background: repeating-linear-gradient(-49deg, transparent, transparent 9px, #00000035 9px, #00000035 18px);
}

<table id="t1">
  <tbody>
    <tr>
      <td>1.1</td>
      <td class="locked">1.2</td>
      <td class="locked">1.3</td>
      <td class="locked">1.4</td>
      <td>1.5</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td class="locked">2.2</td>
      <td class="locked">2.3</td>
      <td class="locked">2.4</td>
      <td>2.5</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td class="locked">3.2</td>
      <td class="locked">3.3</td>
      <td class="locked">3.4</td>
      <td>3.5</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td class="locked">4.2</td>
      <td class="locked">4.3</td>
      <td class="locked">4.4</td>
      <td>4.5</td>
    </tr>
    <tr>
      <td>5.1</td>
      <td class="locked">5.2</td>
      <td class="locked">5.3</td>
      <td class="locked">5.4</td>
      <td>5.5</td>
    </tr>
  </tbody>
</table>
<hr>



<table id="t2">
  <tbody>
    <tr>
      <td>1.1</td>
      <td class="locked">1.2</td>
      <td class="locked">1.3</td>
      <td class="locked">1.4</td>
      <td>1.5</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td class="locked">2.2</td>
      <td class="locked">2.3</td>
      <td class="locked">2.4</td>
      <td>2.5</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td class="locked">3.2</td>
      <td class="locked">3.3</td>
      <td class="locked">3.4</td>
      <td>3.5</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td class="locked">4.2</td>
      <td class="locked">4.3</td>
      <td class="locked">4.4</td>
      <td>4.5</td>
    </tr>
    <tr>
      <td>5.1</td>
      <td class="locked">5.2</td>
      <td class="locked">5.3</td>
      <td class="locked">5.4</td>
      <td>5.5</td>
    </tr>
  </tbody>
</table>

有两个表格，其中一些单元格具有条纹背景。

#t2中的条纹单元格几乎是我想要的：相邻单元格中的条纹几乎重合，看起来就像是在整个列（或几列）上绘制的。

但我不喜欢我是如何实现这一目标的：通过调整单元格大小和条纹宽度和角度。

是否有可能通过某种方式“移动”条纹背景来实现#t1表的类似外观？并且不要改变条纹的宽度和角度以及单元尺寸吗？

Answer 1

您可以将渐变应用于整个表格，并将白色背景应用于不需要渐变的单元格。

table {
  border-collapse: collapse;
  background: repeating-linear-gradient(-45deg, transparent, transparent 7px, #00000035 7px, #00000035 14px);
}

table>tbody td {
  border: solid 1px #00000062;
  width: 47px;
  height: 34px;
  text-align: center;
}

td:not(.locked) {
  background:#fff;
}
#t2 td {
  width: 45px;
  height: 25px;
}

<table id="t1">
  <tbody>
    <tr>
      <td>1.1</td>
      <td class="locked">1.2</td>
      <td class="locked">1.3</td>
      <td class="locked">1.4</td>
      <td>1.5</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td class="locked">2.2</td>
      <td class="locked">2.3</td>
      <td class="locked">2.4</td>
      <td>2.5</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td class="locked">3.2</td>
      <td class="locked">3.3</td>
      <td class="locked">3.4</td>
      <td>3.5</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td class="locked">4.2</td>
      <td class="locked">4.3</td>
      <td class="locked">4.4</td>
      <td>4.5</td>
    </tr>
    <tr>
      <td>5.1</td>
      <td class="locked">5.2</td>
      <td class="locked">5.3</td>
      <td class="locked">5.4</td>
      <td>5.5</td>
    </tr>
  </tbody>
</table>
<hr>



<table id="t2">
  <tbody>
    <tr>
      <td>1.1</td>
      <td class="locked">1.2</td>
      <td class="locked">1.3</td>
      <td class="locked">1.4</td>
      <td>1.5</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td class="locked">2.2</td>
      <td class="locked">2.3</td>
      <td class="locked">2.4</td>
      <td>2.5</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td class="locked">3.2</td>
      <td class="locked">3.3</td>
      <td class="locked">3.4</td>
      <td>3.5</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td class="locked">4.2</td>
      <td class="locked">4.3</td>
      <td class="locked">4.4</td>
      <td>4.5</td>
    </tr>
    <tr>
      <td>5.1</td>
      <td class="locked">5.2</td>
      <td class="locked">5.3</td>
      <td class="locked">5.4</td>
      <td>5.5</td>
    </tr>
  </tbody>
</table>

Answer 2

您需要为背景设置一个公共参考点。

这需要的风格是

background-attachment: fixed

＆＃13;

table {
  border-collapse: collapse;
}

table>tbody td {
  border: solid 1px #00000062;
  width: 47px;
  height: 34px;
  text-align: center;
}

#t1 td.locked {
  background: repeating-linear-gradient(-45deg, transparent, transparent 7px, #00000035 7px, #00000035 14px);
  background-attachment: fixed; /* added */
}

＆＃13;

<table id="t1">
  <tbody>
    <tr>
      <td>1.1</td>
      <td class="locked">1.2</td>
      <td class="locked">1.3</td>
      <td class="locked">1.4</td>
      <td>1.5</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td class="locked">2.2</td>
      <td class="locked">2.3</td>
      <td class="locked">2.4</td>
      <td>2.5</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td class="locked">3.2</td>
      <td class="locked">3.3</td>
      <td class="locked">3.4</td>
      <td>3.5</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td class="locked">4.2</td>
      <td class="locked">4.3</td>
      <td class="locked">4.4</td>
      <td>4.5</td>
    </tr>
    <tr>
      <td>5.1</td>
      <td class="locked">5.2</td>
      <td class="locked">5.3</td>
      <td class="locked">5.4</td>
      <td>5.5</td>
    </tr>
  </tbody>
</table>
<hr>

＆＃13;

如何使用重复线性渐变（）移动背景

2 个答案: