How to move backgroung with repeating-linear-gradient()

It's a bit complicated for me to explain this by words, so please look at

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>

There are two tables with some cells having striped background.

Striped cells in #t2 are nearly what I want: stripes in neighboring cells almost coincide and look like that they are drawn across the whole column (or several columns).

But I don't like how I've achieved this: by adjusting cells size and stripes width and angle.

Is it possible to achieve similar look for #t1 table by somehow "move" striped background? And don't change stripes width and angle and cells size also?

Solution

You may apply the gradient to the whole table instead and apply white background to the cell where you don't need the gradient.

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>