CODEWITHSUNDEEP
javascriptcsshtml-table
Luckyn
Luckyn

Reputation: 563

Divided first cell in a table

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)

Upvotes: 2

Views: 827

Answers (2)

Dryden Long
Dryden Long

Reputation: 10182

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/

Upvotes: 3

Camila Gormaz
Camila Gormaz

Reputation: 11

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.

Upvotes: 1

Related Questions