Showing posts with label css3. Show all posts
Showing posts with label css3. Show all posts

Wednesday 10 June 2015

How to draw an html table with diagonal lines and diagonal text?

The main building blocks are:
  • A nicely marked up <table>
  • A pseudo element border with skew to get the basic shape
  • A rotate on the span that contains the header text.
The concept is pretty basic, the pseudo elements and spans are positioned using position: absolute and they are positioned relative to their parent <th> headers which have position: relative
Here is the example!
Here is what it looks like in Chrome / Firefox / IE10+. IE 8 - 9 should work with their proprietary filters.
Screenshot
Here is the HTML / CSS:
* {
    margin: 0;
    padding: 0;
}

body {
    background: #FFF;
}
table {
    border-collapse: collapse;
    margin: 50px 0 0 50px;
    border-top: solid 1px #000;
    position: relative;
}

/* Very top border */
 table:before {
    content:'';
    display: block;
    position: absolute;
    top: -20px;
    left: 120px;
    height: 20px;
    width: 240px;
    border: solid 1px #000;
    border-bottom: none;
}

/* Far right headers top border (it's outside the table) */
 table:after {
    content:'';
    display: block;
    position: absolute;
    border-top: solid 1px #000;
    width: 101px;
    right: -101px;
    top: 0;
}

/* 
     - Apply header background/font colour 
     - Set base z-index for IE 9 - 10
*/
 thead, th:before {
    background: #03a9f4;
    color: #FFF;
    z-index: 1;
}

/* min-width and max-width together act like a width */
 th {
    min-width: 60px;
    max-width: 60px;
    position: relative;
    height: 100px;
}

/* Pseudo element borders */
 th:before {
    content:'';
    display: block;
    position: absolute;
    top: 0;
    right: -50px;
    height: 100px;
    width: 60px;
    border: solid 1px #000;
    border-right: none;
    border-top: none;
    transform: skew(-45deg);
    border-bottom: none;
}

/* Apply the right border only to the last pseudo element */
 thead th:last-child:before {
    border-right: solid 1px #000;
}

/* Apply the top border only to the first rows cells */
 tbody tr:first-child td {
    border-top: solid 1px #000;
}

/* 
     - Rotate and position headings
     - Padding centers the text vertically and does the job of height
     - z-index ensures that the text appears over the background color in IE 9 - 10
*/
 th span {
    transform: rotate(-45deg);
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: -70px;
    bottom: 29px;
    height: 0;
    padding: 0.75em 0 1.85em;
    width: 100px;
    z-index: 2;
}

/* Create first two th styles */
 th:nth-child(1), th:nth-child(2) {
    border: solid 1px #000;
    border-top: none;
    border-bottom: none;
}
th:nth-child(2) {
    border-right: none;
}
th:nth-child(1):before, th:nth-child(2):before {
    display: none;
}

td {
    border: solid 1px #000;
    border-bottom: none;
    border-top: none;
    height: 20px;
    text-align: center;
}
tfoot {
    border: solid 1px #000;
}
 
HTML Code :  
 
<table>
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th><span>Three</span></th>
            <th><span>Four</span></th>
            <th><span>Five</span></th>
            <th><span>Six</span></th>
            <th><span>Seven</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
    </tfoot>
</table>

Create diagonal border of a cell






HTML :

<div id="square">
      <span id="room">ROOM TYPE</span>
       <span id="hosp">HOSPITALITY</span></div>
<div id="line"></div>


CSS :

#square {
    position: absolute;
    top: 100px;
    left: 100px;
    background: #3b2a32;
    border: 2px solid #ad1b59;
    color: #ad1b59;
    height: 200px;
    width: 400px;
    font-family: arial, verdana;
    font-size: 22px;
    font-weight: bolder;
}

#room {
    display: block;
    position: absolute;
    top: 50px;
    left: 220px;
}

#hosp {
    display: block;
    position: absolute;
    top: 140px;
    left: 50px;
}


#line {
    position: absolute;
    top: 190px;
    left: 33px;
    height: 200px;
    width: 450px;
    border-top: 2px solid #ad1b59;   
    -webkit-transform: rotate(26.5deg);
       -moz-transform: rotate(26.5deg);
        -ms-transform: rotate(26.5deg);
         -o-transform: rotate(26.5deg);
            transform: rotate(26.5deg);
}