带有斜线的 html 表格拆分左边的单元格

Question

我想知道如何在 html 中编写一个用斜线分隔左侧单元格的表格？即，对于表格中左侧的单元格，有一条对角线将其分成两部分，两边各有一些文本。

Answer 1

由于 HTML 是基于框对象的，因此无法使用标准元素实现这一点。

实现此目的的最简单方法是将单元格分成三列，并在中间列中使用背景图像> 模仿表格单元格的边框宽度。

这个效果可以这样实现:

<style type="text/css">
    table {
        border-spacing: 0;
    }

    table tr td {
        border: 1px solid black;

    }

    table .cell-left {
        border-right: 0;
    }

    table .cell-middle {
        border-left: 0;
        border-right: 0;
        background-image: url(slash.png);
        background-position: center center;
    }

    table .cell-right {
        border-left: 0;
    }
</style>

  <table>
      <tr>
          <td class="cell-left">Cell A</td>
          <td class="cell-middle">&nbsp;</td>
          <td class="cell-right">Cell B</td>
      </tr>
  </table>

注意:

• 所提供的类名仅供引用，您可能希望将它们命名为更“符合语义”的名称
• 需要一张合适的图片，在我的测试中，我创建了一条简单的 1 像素对角线(你是 free to use )，但是你当然可以随心所欲地发挥创意。在上面的示例中，背景图像设置为在单元格的绝对中心对齐，这意味着您可以创建任意大的图像，以便相应地缩放。