带有斜杠的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像素对角线(您可以自由使用),但是您当然可以根据自己的意愿创建.在上面的示例中,背景图像设置为在单元格的绝对中心对齐,这意味着您可以根据需要创建大小的图像,以便相应地缩放.

Answer 2

使用背景图像模拟分割的单元格.