HTML或CSS中的斜线？

Question

我要做成这样的桌子 CSS对角线罢工

可以在表格中添加倾斜的对角线边框吗？

Answer 1

基于CSS3线性梯度解决方案，但角度不是硬编码的：

table:nth-of-type(1) td {

  background-image: linear-gradient(

    to top right,

    white 48%,

    black,

    white 52%

  );

}

table:nth-of-type(2) td {

  background-image: linear-gradient(

    to top right,

    papayawhip calc(50% - 1px),

    black,

    papayawhip calc(50% + 1px)

  );

}

/* for testing */

table {

  border-collapse: collapse;

  margin-top: 1em;

  margin-bottom: 1em;

}

td:nth-child(odd) {

  width: 10em;

}

td:nth-child(even) {

  width: 20em;

}


<table border="1">

  <tbody>

    <tr>

      <td>Narrow</td>

      <td>Wide</td>

    </tr>

    <tr>

      <td>Narrow</td>

      <td>Wide</td>

    </tr>

  </tbody>

</table>

<table border="1">

  <tbody>

    <tr>

      <td>Narrow</td>

      <td>Wide</td>

    </tr>

    <tr>

      <td>Narrow</td>

      <td>Wide</td>

    </tr>

  </tbody>

</table>