带有斜线的html表格拆分左侧单元格答案

【问题标题】：html table with slash splitting the leftup cell带有斜线的html表格拆分左侧单元格
【发布时间】：2017-01-01 23:30:48
【问题描述】：

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

【问题讨论】：

【解决方案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），但是您当然可以随心所欲地发挥创意。在上面的示例中，背景图像设置为与单元格的绝对中心对齐，这意味着您可以创建任意大小的图像以进行相应的缩放。

【讨论】：

很好的演示。您使用什么软件创建图像？
该图像是使用 Adobe Fireworks 制作的，但可能是在几乎任何图像/矢量操作/创建工具（Photoshop、InkScape、GIMP、Illustrator 等）中制作的

【解决方案2】：

使用模拟拆分的单元格的背景图像。

【讨论】：

您还必须在图片中包含文字。

【解决方案3】：

另外两个想法：

将斜线图像分成两半并在两侧使用（可以翻转，保存图像）

如果您正在布局，请不要使用表格...使用 CSS。只是想我会补充一点，以防您尝试使用 Photoshop 的图像切片或其他东西。糟糕的想法。

【讨论】：