在 table 中划分第一个单元格

Question

是否可以拆分 table 的第一个单元格并向其添加 2 个标题？

我想要的是这样的：

我找到了几种水平或垂直划分单元格的解决方案，但我找不到如何对角线划分...

有人知道怎么做吗？什么技术都可以(html,css,javascript)

Answer 1

目前没有可以对角线拆分单元格的代码。

目前最简单的解决方案是使用背景图片，然后将每个项目对齐到最右边和最左边：http://codepen.io/cgormaz/pen/XbWBMz

HTML代码：

<table width="300" border="0" cellspacing="0">
  <tr>
    <td width="100" class="split">
        <span class="right">n</span>
        <span class="left">k</span>
    </td>
    <td width="100">0</td>
    <td width="100">1</td>
  </tr>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

CSS代码：

table, td { border: 1px solid #000}
.right {float:right;}
.left {float:left;}
.split {background: url(http://i.imgur.com/EvYxw2p.png) no-repeat;
  background-size: 100% 100%;}

您可以用 javascript 编程的 svg 或线条替换图像，但从技术上讲它仍然只是图像而不是细胞分裂。

Answer 2

如果你想要一个纯粹的 CSS 方法，你可以使用 hr 标签和 transform 属性。这样的事情应该会让你接近：

HTML

<table>
    <tr>
        <td>
            <span id="A">A</span>
            <hr/>
            <span>B</span>
        </td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
</table>

CSS

td {
    width: 50px;
    border:1px solid black;
    text-align:center;
}
hr {
    -moz-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
    -webkit-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
    transform: rotate(45deg);  
    width:150%;
    margin-left:-15px;
}

这是一个 fiddle 的实际效果：http://jsfiddle.net/edwa04u2/

在 table 中划分第一个单元格

Divided first cell in a table

javascript

css

html-table