如何使表格的第一列对角分成两部分？

Question

我有这张图片：

我用HTML & CSS 成功了

table {
  border: 1px solid;
  border-collapse: collapse;
}
tr,
th,
td {
  border: 1px solid;
  padding: 10px;
}

<table>
<thead>
  <tr>
    <th>Asset \ File</th>
    <th>Link</th>
    <th>Comments</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
  </tr>
</tbody>
</table>

但我想让第一行的第一列分成两部分（对角线是连接两个角的直线段一个单元格） 就像我用 paint编辑 的图像：

为了制作这种风格，我选择了第一个 th:first-child 基于这个Answer

table {
  border: 1px solid;
  border-collapse: collapse;
}
tr,
th,
td {
  border: 1px solid;
  padding: 10px;
}
/*diagonal line*/
th:first-child {
  background: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) calc(50% - 0.8px),
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) calc(50% + 0.8px),
    rgba(0, 0, 0, 0) 100%
  );
}

<table>
  <thead>
    <tr>
      <th>Asset \ File</th>
      <th>Link</th>
      <th>Comments</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

是否有任何其他方法或方法可以在不使用 background 和 linear-gradient 的情况下构建这种样式？

Answer 1

抱歉，格式快速而肮脏，但从这里借用了 svg 背景，https://stackoverflow.com/a/28974253/16776945 并将资产和文件定位为 th 中的单独 div。看起来像你要找的东西

table {
  border: 1px solid;
  border-collapse: collapse;
}
tr,
th,
td {
  border: 1px solid;
  padding: 10px;
}
/*diagonal line*/
th:first-child {
  position: relative;
  width: 200px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /></svg>");
background-repeat:no-repeat;
background-position:center center;
background-size: 100% 100%, auto;
}
#leftItem { 
  position:absolute; 
  left:2px; 
  bottom:2px; 
}
#rightItem { 
  position:absolute; 
  right:2px; 
  top:2px; 
}

<table>
  <thead>
    <tr>
      <th>
        <div id="leftItem">File</div>
        <div id="rightItem">Asset</div>
      </th>
      <th>Link</th>
      <th>Comments</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Answer 2

您可以按照here 指出的那样使用网格

table {
  border: 1px solid;
  border-collapse: collapse;
}
tr,
th,
td {
  border: 1px solid;
  padding: 10px;
}
/*diagonal line*/
th:first-child {
  display: grid;
  width: max-content;
  justify-content: space-between;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/></svg>");
  background-size: 100% 100%;
  border: 0;
}

<table>
  <thead>
    <tr>
      <th>Asset \ File</th>
      <th>Link</th>
      <th>Comments</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>