在表格中划分第一个单元格

Question

是否可以划分表格的第一个单元格并为其添加2个标题？

我想要的是这样的：

我找到了几种水平或垂直分割细胞的解决方案，但是我找不到如何对角地进行细分...

有人知道怎么做吗？任何技术都可以（html，css，javascript）

Answer 1

如果您想要纯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;
}

这里有一个小提琴：http://jsfiddle.net/edwa04u2/

Answer 2

目前没有代码可以对角分割你的细胞。

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

HTML code：

<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%;}

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