|
|
| Line 43: |
Line 43: |
| } | | } |
|
| |
|
| .table-header-rotated tr:first-of-type th:first-of-type > div, | | .table-header-rotated tr:first-of-type th:first-of-type > div { |
| .table-header-rotated tr:last-of-type th:first-of-type > div {
| |
| vertical-align: center; | | vertical-align: center; |
| text-align: left; | | text-align: left; |
| Line 50: |
Line 49: |
| } | | } |
|
| |
|
| .table-header-rotated tr:last-of-type th:nth-of-type(n+2){
| | |
| height: 100px;
| |
| width: 40px;
| |
| min-width: 40px;
| |
| max-width: 40px;
| |
| position: relative;
| |
| padding: 0;
| |
| font-size: 12px;
| |
| line-height: 1;
| |
| }
| |
| .table-header-rotated tr:last-of-type th:nth-of-type(n+2) > div{
| |
| position: relative;
| |
| top: 0px;
| |
| left: -50px; /* 80 * tan(-45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
| |
| height: 100%;
| |
| -ms-transform:skew(-45deg,0deg);
| |
| -moz-transform:skew(-45deg,0deg);
| |
| -webkit-transform:skew(-45deg,0deg);
| |
| -o-transform:skew(-45deg,0deg);
| |
| transform:skew(-45deg,0deg);
| |
| overflow: hidden;
| |
| border-left: 1px solid #CCCCCC;
| |
| border-right: 1px solid #CCCCCC;
| |
| }
| |
| .table-header-rotated tr:last-of-type th:nth-of-type(n+2) span {
| |
| -ms-transform:skew(45deg,0deg) rotate(-45deg);
| |
| -moz-transform:skew(45deg,0deg) rotate(-45deg);
| |
| -webkit-transform:skew(45deg,0deg) rotate(-45deg);
| |
| -o-transform:skew(45deg,0deg) rotate(-45deg);
| |
| transform:skew(45deg,0deg) rotate(-45deg);
| |
| position: absolute;
| |
| bottom: 35px; /* 40 cos(-45) = 28 with an additional 2px margin*/
| |
| left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
| |
| display: inline-block;
| |
| width: 100%;
| |
| width: 85px; /* 80 / cos(-45) - 40 cos (-45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
| |
| text-align: right;
| |
| white-space: nowrap; /*whether to display in one line or not*/
| |
| }
| |
|
| |
|
| .table-header-rotated tr:nth-of-type(n+2) td:first-of-type { | | .table-header-rotated tr:nth-of-type(n+2) td:first-of-type { |
