Divided first cell in a table

Question

Is it possible divide the first cell of a table and add 2 titles to it ?

What I would like is something like this :

enter image description here

I find several solutions to divide cell horizontally or vertically, but I can't find how to do it diagonally...

Anybody know how to do it ? Any technology is ok (html, css, javascript)

I'd be surprised if there was, but I'd be interested to know for sure (i.e. I don't know, so this is a comment, not an answer) — freefaller, Apr 23 '15 at 16:08
possible duplication - http://stackoverflow.com/questions/14739162/two-tone-background-split-by-diagonal-line-using-css — Luís P. A., Apr 23 '15 at 16:19
@Luis P. A. this is close but I won't say duplicate beacause I think the text position is also an hard step — Luckyn, Apr 24 '15 at 07:19
@Shaggy I would prefer n and k be in the same cell (for later export), but all solution is ok for the moment. Anyways both current answers are good and I think I'll do it using their idea. — Luckyn, Apr 24 '15 at 07:19

score 3 · Accepted Answer · answered Apr 23 '15 at 16:33

If you wanted a pure CSS method, you could use hr tags and the transform property. Something like this should get you close:

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

Here's a fiddle of it in action: http://jsfiddle.net/edwa04u2/

score 1 · Answer 2 · answered Apr 23 '15 at 16:29

There's no code that will split your cells diagonally at the moment.

The simplest solution at the moment is using a background image and then aligning each item to the far right and to the far left: 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 Code:

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

You can replace the image with an svg or a line programmed with javascript, but technically it is still just an image and not the cells splitting.

Divided first cell in a table

2 Answers2