[分享]css做出带对角线的表格

网页开发中，表格是常见的元素之一。在使用表格时，大多数情况下都需要让表格更加美观和易读。CSS 是一种样式表语言，可以为 HTML 文档添加样式，让我们可以很方便地让表格更加漂亮。接下来，我们将介绍如...

网页开发中，表格是常见的元素之一。在使用表格时，大多数情况下都需要让表格更加美观和易读。CSS 是一种样式表语言，可以为 HTML 文档添加样式，让我们可以很方便地让表格更加漂亮。接下来，我们将介绍如何使用 CSS 制作带有对角线的表格。

<table>
  <tbody>
    <tr>
      <th></th>
      <th>星期一</th>
      <th>星期二</th>
      <th>星期三</th>
      <th>星期四</th>
      <th>星期五</th>
      <th>星期六</th>
      <th>星期日</th>
    </tr>
    <tr>
      <th>早上</th>
      <td class="diagonal">10</td>
      <td>12</td>
      <td>8</td>
      <td>9</td>
      <td>11</td>
      <td>13</td>
      <td>15</td>
    </tr>
    <tr>
      <th>下午</th>
      <td>18</td>
      <td class="diagonal">20</td>
      <td>16</td>
      <td>19</td>
      <td>15</td>
      <td>17</td>
      <td>19</td>
    </tr>
    <tr>
      <th>晚上</th>
      <td>22</td>
      <td>24</td>
      <td class="diagonal">20</td>
      <td>23</td>
      <td>25</td>
      <td>27</td>
      <td>29</td>
    </tr>
  </tbody>
</table> 

在上面的代码中，我们使用了带有 class="diagonal" 的单元格来实现对角线效果。接下来，我们使用 CSS 为该类单元格添加样式。

.diagonal {
  position: relative;
  background-color: #fff;
}

.diagonal:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 2px solid #000;
  width: 100%;
  height: 100%;
  transform-origin: bottom right;
  transform: skew(-45deg);
} 

在上面的代码中，我们首先使用 position:relative; 将单元格标记为相对定位，然后使用 background-color: #fff; 将背景颜色设置为白色，以隐藏原始单元格颜色。接下来，我们使用伪元素 :before 为单元格添加对角线效果。我们将其设置为块级元素，同时使用 position:absolute; 将其定位在单元格的左上角。然后，我们使用 border-top: 2px solid #000; 为伪元素添加上边框，并将其宽度设置为 100% 和高度设置为 100%。最后，我们使用 transform-origin: bottom right; 将伪元素的旋转中心设置为单元格的右下角，然后使用 transform: skew(-45deg); 将伪元素顺时针旋转 45 度，实现对角线效果。

总之，通过使用 CSS，我们可以轻松地为网页中的表格添加对角线，并使表格更加易读和美观。