I have a matrix which, because of the subjects names, is stretching off screen
I wish to create a training matrix with the abilities on the left, colored cells for the acquired skill, with the subjects name vertically across the columns.
I have tries using bootstrap and css rules to rotate text, but I cant get the text to float above the grid
apologies, this is what I have tried :
<style>
.rotate {
transform: rotate(90deg);
width: 8rem;
}
</style>
</head>
<body>
<div class="row">
<div class="col">
<table class="table">
<tr> <td> </td>
<tr> <td> <p class="text-nowrap bd-highlight rotate ">Bruce Wayne. </p> </td>
<tr> <td> <p class="text-nowrap bd-highlight rotate ">Clark Kent.</p> </td>
<tr> <td> <p class="text-nowrap bd-highlight rotate ">Barry Allen.</p> </td>
</tr>
<tr> <td> Detective</td> <td class="table-success"> </td> <td class="table-success"></td> <td class="table-success"></td> </tr>
<tr> <td> can fly</td> <td class="table-success"> </td> <td class="table-success"></td> <td class="table-success"></td> </tr>
<tr> <td> runs fast</td> <td class="table-success"> </td> <td class="table-success"></td> <td class="table-success"></td> </tr>
<tr> <td> plays well</td> <td class="table-success"> </td> <td class="table-success"></td> </tr>
</table>
all the vertical text stacks to the left of the screen.
Is this what you wanted?
.table {
background: grey;
border-spacing: 5px;
border: none;
width: 500px;
}
.rotate {
transform: rotate(90deg);
width: 8rem;
}
td {
width: 25%;
border: 2px solid black;
padding: 10px;
position: relative;
}
.vertical {
transform: rotate(90deg);
position: absolute;
top: 200%;
left: 0;
right: 0;
color: #fff;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
white-space: nowrap;
}
.
<body>
<div class="row">
<div class="col">
<table class="table">
<tr>
<td> Detective</td>
<td class="table-success"><span class="vertical"> Bruce Wayne</span> </td>
<td class="table-success"><span class="vertical"> clark Kent</span></td>
<td class="table-success"><span class="vertical"> barry allen</span></td>
</tr>
<tr>
<td> can fly</td>
<td class="table-success"> </td>
<td class="table-success"></td>
<td class="table-success"></td>
</tr>
<tr>
<td> runs fast</td>
<td class="table-success"> </td>
<td class="table-success"></td>
<td class="table-success"></td>
</tr>
<tr>
<td> plays well</td>
<td class="table-success"> </td>
<td class="table-success"></td>
<td class="table-success"></td>
</tr>
</table>
You haven't given your code how you did it but I give you a solution. Hope this is useful for you.
.rotate{
transform: rotate(-90deg);
}
<table>
<tr>
<td class="rotate">BRUCE</td>
<td class="rotate">CLARK</td>
<td class="rotate">BARRY</td>
</tr>
</table>
Related
How can I make columns in two tables have the same width?
I tried applying the width property on the td element for each column and the property style = "table-layout: fixed; but as you can see, the boundaries of the columns do not match.
JSFiddle: https://jsfiddle.net/v2bxdygj/
Here is my sample which works to some extent:
table {
border: 1px solid grey;
border-collapse:collapse;
width: 100%;
table-layout:fixed;
}
td {
border: 1px solid grey;
padding-left: 5px;
padding-right: 5px;
white-space: nowrap;
}
td span {
white-space: nowrap;
}
.code {
width: 40px;
}
.name {
width: 548px;
}
.colspan {
width: 588px;
}
.col3, .col4, .col5 {
width: 10%;
}
<table>
<tr>
<td class="code"><button>Код</button></td>
<td class="name"><button>Название</button></td>
<td class="col3"> </td>
<td class="col4"> </td>
<td class="col5"> </td>
</tr>
<tr>
<td class="colspan" colspan="2"><input type="text"> <span>Фильтр по коду и названию...</span></td>
<td class="col3">Разрешено</td>
<td class="col4">Запрещено</td>
<td class="col5">Неопределено</td>
</tr>
</table>
<table>
<tr>
<td class="code">1</td>
<td class="name">Вход в систему</td>
<td class="col3"> </td>
<td class="col4"> </td>
<td class="col5"> </td>
</tr>
<tr>
<td>2</td>
<td>Редактирование, администрирование групп и пользователей</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>Создание или редактирование определения адресного элемента</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td>Создание или редактирование записи адресного элемента</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
I would like to create a html template that when print in chrome browser, the header and footer will fixed on the top and bottom of the page. The tbody will be in between of header and footer. It's height is the total height after minus header and footer. If the tbody exceed the height, it will break into next page. Now, I am having issue that when printing the html template, the tbody will overlap the tfoot and thead on the next page, as shown in these pictures. Please kindly advice. My html template is on the below github link.
.
The HTML is in my github repository. Please help to check on this link.
MyTemplate
Below is my code and my reference for dealing page break for large html table.
Reference
This is a short snippet of my code structure
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
html,
body,
* {
margin: 0;
padding: 0;
}
table {
page-break-inside: auto;
border-collapse: collapse;
}
tr {
page-break-inside: avoid;
page-break-after: auto
}
td {
page-break-inside: avoid;
page-break-after: auto
}
div {
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group
}
/* tbody {
display: table;
width: 100%;
table-layout: fixed;
} */
#media screen {
div.divFooter {
display: none;
}
div.divHeader {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
height: 250px;
bottom: 0;
left: 0;
text-align: left;
display: block;
}
div.divHeader {
position: fixed;
height: 100px;
top: 0;
left: 0;
display: block;
}
div.divBody {
height: calc(100% - 350px);
position: relative;
text-align: left;
margin-top: 20rem;
margin-bottom: -20rem;
page-break-after: always;
}
}
</style>
</head>
<body>
<table style="width: 100%;">
<thead>
<tr>
<th>
<div class="divHeader" style="display: inline-block; width: 100%;">
<table style="width: 100%; text-align: left;">
<tr>
<td><img style="width: 120px; height: 120px;"
src="https://bp.doctor2u.my/assets/img/bplogo.png">
</td>
<td style="vertical-align: top; ">
<table>
<tr style="margin-left: 1 rem;">
<td colspan="2">
<a
style="font-family:Helvetica;font-weight: bold; font-size: 20pt;">
PATHOLOGY
REPORT
</a>
</td>
</tr>
<tr>
<td colspan="2">
<span>B. P. CLINICAL LAB SDN. BHD. (152314-H)</span>
</td>
</tr>
<tr>
<td>
<span>[BranchAddress] ,</span>
</td>
<td>
<span> [BranchEmail]</span>
</td>
</tr>
<tr>
<td>
<label>Tel : </label><span>[BranchTel]</span>
</td>
<td>
<label>Fax : </label><span>[BranchFax]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>GST Reg No. : </label><span>[GST]</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 100%; text-align: left;">
<tr>
<td>
<label>Client PatientID :</label><span>[ClientId]</span>
</td>
<td colspan="2">
<label>Barcode :</label><span>[LabNo]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>Patient Name :</label><span>[PatientName]</span>
</td>
<td>
<label>Age/Gender :</label><span>[Age] / [Gender]</span>
</td>
</tr>
<tr class="spaceUnder">
<td>
<label>NRIC No :</label><span>[IC]</span>
</td>
<td>
<label>Refer No :</label><span>[ReferNo]</span>
</td>
<td>
<label>Branch :</label><span>[BranchName]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>Client Name :</label><span>[ClinicName]</span>
</td>
<td>
<label>Tel :</label><span>[Tel]</span>
</td>
</tr>
<tr class="spaceUnder2">
<td colspan="2">
<label>Doctor’s Name :</label><span>[DoctorName]</span>
</td>
<td>
<label>Fax:</label><span>[Fax]</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>Specimen :</label><span>[Specimen]</span><span>-sampled at
</span><span>[SampleDate]</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>Received :</label><span>[LabNo] by [ReceivedBranch]
[ReceiveDate]</span>
</td>
</tr>
</table>
<label for="" style="float: right;">Page 2 of 3</label>
<table
style="border-top: 5px solid black; width: 100%; border-spacing: 1rem; text-align: center;"
class="spaceUnderTable">
<tr class="spaceUnder">
<th>
<label for="">TEST NAME</label>
</th>
<th>
<label for="">RESULT</label>
</th>
<th>
<label for="">UNIT</label>
</th>
<th>
<label for="">REFERENCE NOTE</label>
</th>
<th>
<label for="">RESULT</label>
</th>
<th>
<label for="">UNIT</label>
</th>
<th>
<label for="">REFERENCE NOTE</label>
</th>
</tr>
</table>
</div>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
<div class="divFooter" style="display: inline-block; width: 100%; left:0px;
bottom:0px; text-align: left;">
<table style="width: 100%; margin-top: 1rem;">
<tr>
<td rowspan="7" style="width: 20%;">
<!-- [Image] -->
</td>
</tr>
<tr>
<td>
Results validated and authorised through the Laboratory information
System.
</td>
</tr>
<tr>
<td>
Results checked and authorised for release
</td>
</tr>
<tr>
<td>
Test done at B.P. Clinical Lab Sdn. Bhd. (Ipoh) 273-B Jalan Raja
Permaisuri
Bainun,
30250
Ipoh, Perak.
</td>
</tr>
<tr>
<td>
Tel: 05-2559090 Fax:05-2419226
</td>
</tr>
<tr>
<td>
Ipoh lab is a MS ISO 15189 accredited lab
</td>
</tr>
<tr>
<td>
* Not SAMM Accredited
</td>
</tr>
<tr>
<td colspan="4">
<p style=" margin-top: 1rem; text-align: center;">
For further confirmation, please
repeat test with another
fresh
specimen, if desired.
Should
you
have further enquiries, please
contact your nearest BP branch or mail us at
corpcare#bphealthcare.com
<br>
[BranchAddress], [BranchEmail]
Tel: <span>[Tel]</span>,
Fax: [Fax]
</p>
</td>
</tr>
</table>
</div>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<div class="divBody">
<table style="width: 100%; border-spacing: 1rem; text-align: center;"
class="spaceUnderTable">
<!-- LIPIDS STUDIES -->
<tr>
<td style="text-align: left;">
<label for=""><strong>Full Blood Count</strong></label>
</td>
</tr>
<tr>
<td style="text-align: left;">
<label for="">Total RBC</label>
</td>
<td>
<label for="">[TotalRBCResult]</label>
</td>
<td>
<label for="">[TotalRBCUnit]</label>
</td>
<td>
<label for="">[TotalRBCRange]</label>
</td>
<td>
<label for="">[TotalRBCResult2]</label>
</td>
<td>
<label for="">[TotalRBCUnit2]</label>
</td>
<td>
<label for="">[TotalRBCRange2]</label>
</td>
</tr>
<!-- More row -->
<br>
<br>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I created a table inside of a card. The issue I having is that when I minimize the page, some of the html elements begin to leave the card as you can see in the image below. Can someone tell me why this may be happening? Here is a fiddle that has the html and css for this.
<div class="report-card-i text-center text-muted">
<div class="font-16 m-l-35 p-t-25 p-b-10">Top Locations</div>
<div class="m-l-15 m-r-15">
<table class="table">
<thead>
<tr class="black-cell">
<th class="font-light">#</th>
<th class="font-light"><span class="m-l-125">Location</span></th>
<th class="font-light">Shipments</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
<tr>
<td class="font-16">1</td>
<td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
<td class="font-16">67</td>
</tr>
</tbody>
</table>
</div>
</div>
.report-card-i{
background: #fff;
box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.2);
position: relative;
margin-top: 30px;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
Initially I want to create a table header like the picture below
I have not found a solution to this problem in recent days.
I have try the vertical-aligment, text-align, table-layout:fixed to solve this problem. But still can't be dynamic like the table I want in the picture above.
.table-print tr td {
border: 1px solid black;
padding-left: 5px;
padding-right: 5px;
padding-top: 4px;
padding-bottom: 4px;
}
.table-print {
border-collapse: collapse;
width: 100%;
}
.verticalTable {
text-align:center;
white-space:nowrap;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
.verticalTable p {
margin:0 -100% ;
display:inline-block;
}
.verticalTable p:before {
content:'';
width:0;
padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
table {
text-align:center;
table-layout : fixed;
width:150px
}
<div style="width: 700px;">
<table class="arial-font table-print">
<thead>
<tr>
<td rowspan="2"><b>Number</b></td>
<td rowspan="2" width="100px"><b>Regencies</b></td>
<td rowspan="2"><b>Facilities</b></td>
<td rowspan="2"><b>Target Number of Facilities Checked</b></td>
<td colspan="2">Check up result</td>
<td colspan="8">Description of Findings</td>
<td colspan="6">Follow-up</td>
</tr>
<tr>
<td class="verticalTable"><p>Good</p></td>
<td class="verticalTable"><p>Findings</p></td>
<td class="verticalTable"><p>Licensing</p></td>
<td class="verticalTable"><p>CPOB/CPKB/CPPB</p></td>
<td class="verticalTable"><p>Unlisted Products</p></td>
<td class="verticalTable"><p>TMS Mutu/Label</p></td>
<td class="verticalTable"><p>Materials / Products are prohibited</p></td>
<td class="verticalTable"><p>Administration</p></td>
<td class="verticalTable"><p>Hygiene & Sanitation</p></td>
<td class="verticalTable"><p>Other</p></td>
<td class="verticalTable"><p>Coaching</p></td>
<td class="verticalTable"><p>Warning</p></td>
<td class="verticalTable"><p>Hard Warning</p></td>
<td class="verticalTable"><p>Temporary Dismissal of Activities</p></td>
<td class="verticalTable"><p>Termination of Activities</p></td>
<td class="verticalTable"><p>ProJustitia</p></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
I want the table to be as wide as <div style="width: 700px;">.
I hope you can help me. Thank you. :)
So I took out the white-space no wrap, changed the orientation of the text , changed width of table to 700px and removed the fix table layout:
.table-print tr td {
border: 1px solid black;
padding-left: 5px;
padding-right: 5px;
padding-top: 4px;
padding-bottom: 4px;
}
.table-print {
border-collapse: collapse;
width: 100%;
}
.verticalTable {
text-align: center;
/*white-space:nowrap;*/
transform: rotate(-90deg);
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.verticalTable p {
margin: 0 -100%;
display: inline-block;
}
.verticalTable p:before {
content: '';
width: 0;
padding-top: 110%;
/* takes width as reference, + 10% for faking some extra padding */
display: inline-block;
vertical-align: middle;
}
table {
text-align: center;
/*table-layout : fixed;*/
width: 700px;
}
<div style="width: 700px;">
<table class="arial-font table-print">
<thead>
<tr>
<td rowspan="2"><b>Number</b></td>
<td rowspan="2" width="100px"><b>Regencies</b></td>
<td rowspan="2"><b>Facilities</b></td>
<td rowspan="2"><b>Target Number of Facilities Checked</b></td>
<td colspan="2">Check up result</td>
<td colspan="8">Description of Findings</td>
<td colspan="6">Follow-up</td>
</tr>
<tr>
<td class="verticalTable">
<p>Good</p>
</td>
<td class="verticalTable">
<p>Findings</p>
</td>
<td class="verticalTable">
<p>Licensing</p>
</td>
<td class="verticalTable">
<p>CPOB/CPKB/CPPB</p>
</td>
<td class="verticalTable">
<p>Unlisted Products</p>
</td>
<td class="verticalTable">
<p>TMS Mutu/Label</p>
</td>
<td class="verticalTable">
<p>Materials / Products are prohibited</p>
</td>
<td class="verticalTable">
<p>Administration</p>
</td>
<td class="verticalTable">
<p>Hygiene & Sanitation</p>
</td>
<td class="verticalTable">
<p>Other</p>
</td>
<td class="verticalTable">
<p>Coaching</p>
</td>
<td class="verticalTable">
<p>Warning</p>
</td>
<td class="verticalTable">
<p>Hard Warning</p>
</td>
<td class="verticalTable">
<p>Temporary Dismissal of Activities</p>
</td>
<td class="verticalTable">
<p>Termination of Activities</p>
</td>
<td class="verticalTable">
<p>ProJustitia</p>
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
I'd recommend looking into writing-mode for the vertical text.
The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
MDN
You will still have to work on the font-size since you are trying to cram an awful lot into 700px...but this should make it more manageable.
.table-print tr td {
border: 1px solid black;
font-size: 14px;
}
.table-print {
border-collapse: collapse;
width: 100%;
}
.verticalTable {
text-align: center;
}
td b,
.verticalTable p {
writing-mode: vertical-lr;
transform: rotate(180deg);
}
table {
table-layout: fixed;
width: 100%;
text-align: center;
}
<div style="width: 700px;">
<table class="arial-font table-print">
<thead>
<tr>
<td rowspan="2"><b>Number</b></td>
<td rowspan="2"><b>Regencies</b></td>
<td rowspan="2"><b>Facilities</b></td>
<td rowspan="2"><b>Target Number of Facilities Checked</b></td>
<td colspan="2">Check up result</td>
<td colspan="8">Description of Findings</td>
<td colspan="6">Follow-up</td>
</tr>
<tr>
<td class="verticalTable">
<p>Good</p>
</td>
<td class="verticalTable">
<p>Findings</p>
</td>
<td class="verticalTable">
<p>Licensing</p>
</td>
<td class="verticalTable">
<p>CPOB/CPKB/CPPB</p>
</td>
<td class="verticalTable">
<p>Unlisted Products</p>
</td>
<td class="verticalTable">
<p>TMS Mutu/Label</p>
</td>
<td class="verticalTable">
<p>Materials / Products are prohibited</p>
</td>
<td class="verticalTable">
<p>Administration</p>
</td>
<td class="verticalTable">
<p>Hygiene & Sanitation</p>
</td>
<td class="verticalTable">
<p>Other</p>
</td>
<td class="verticalTable">
<p>Coaching</p>
</td>
<td class="verticalTable">
<p>Warning</p>
</td>
<td class="verticalTable">
<p>Hard Warning</p>
</td>
<td class="verticalTable">
<p>Temporary Dismissal of Activities</p>
</td>
<td class="verticalTable">
<p>Termination of Activities</p>
</td>
<td class="verticalTable">
<p>ProJustitia</p>
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
You can catch up on my fiddle jsfiddle.net/alyeah/ny1h546d/
I have rotated text in a table cell but the background color is not filling the cell. I have search StackOverflow and tried pretty much every answers I
could find to no avail. Here is the JSFiddle: https://jsfiddle.net/eoar08fx/
HTML:
<td rowspan='4'>
<div class='vertical-text'>Activities</div>
</td>
CSS:
.vertical-text {
color: #FFFFFF;
background-color: #2E9AFE;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
/* accepts left, right, top, bottom */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* do not set in IE9+? */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 3);
}
Thanks for any tips or points.
you've set the background on the div inside the cell, not to the cell, you need to apply the background color to the td and rotate the text inside the div
<td rowspan='4' class='vertical-text'>
<div >Activities</div>
</td>
and
.vertical-text {
color: #FFFFFF;
background-color: #2E9AFE;
}
.vertical-text div {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
/* accepts left, right, top, bottom */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* do not set in IE9+? */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 3);
}
https://jsfiddle.net/grassog/51mhy9qe/1/
Try applying the cell-blue CSS class property you created to your td conatining the div which contains the text itself.
It should fill the td instead of only filling the div.
Simple answer is indeed to set background to the cell via the class you use else where.
For the width , 2 options below
You can also use the writing-mode propertie for this (longtime ago it use to be an IE 5 feature). It might avoid to deal with the width of that cell.
https://developer.mozilla.org/fr/docs/Web/CSS/writing-mode
https://msdn.microsoft.com/library/ms531187%28v=vs.85%29.aspx
.vertical-text {
margin:0 0 0 1em;
line-height:0.5em;
max-height:4em;
font-size: 2em;
color: #FFFFFF;
text-align:center;
-webkit-writing-mode:vertical-lr;/* old windows safari */
writing-mode:vertical-lr;
writing-mode:tb-lr;
direction:ltr;
transform:scale(-1,-1);/* orientation can be reversed */
}
.cell-blue {
color: #FFFFFF;
background-color: #2E9AFE;
}
.cell-grey {
color: #DEF0F6;
background-color: #D8D8D8;
}
td.wide-cell {
font-family: Arial;
text-align: center;
vertical-align: middle;
height: 45px;
width: 300px;
}
td.short-cell {
font-family: Arial;
text-align: center;
vertical-align: middle;
height: 45px;
width: 70px;
}
.centered-cell {
font-family: Arial;
text-align: center;
vertical-align: middle;
height: 60px;
width: 70px;
}
<table border="1" cellpadding="0" cellspacing="0" style="margin-left:30px; text-align:center; vertical-align:middle;">
<tr>
<td colspan="2" class="wide-cell cell-blue">
DATE
</td>
<td class="short-cell cell-blue">
YTD
</td>
<td class="short-cell cell-blue">
Q1
</td>
<td class="short-cell cell-blue">
Q2
</td>
<td class="short-cell cell-blue">
Q3
</td>
<td class="short-cell cell-blue">
Q4
</td>
</tr>
<tr>
<td rowspan='4' class='cell-blue'><!-- it deserves the cell-blue class doesn't it ? */
<div class='vertical-text'>Activities</div>
</td>
<td class='left-cell cell-blue'>
Setup Y/N
</td>
<td class='centered-cell cell-grey'>
<div id='setupYTD'></div>
</td>
<td class='centered-cell cell-grey'>
<div id='setupQ1'></div>
</td>
<td class="centered-cell cell-grey">
<div id='setupQ2'></div>
</td>
<td class="centered-cell cell-grey">
<div id='setupQ3'></div>
</td>
<td class="centered-cell cell-grey">
<div id='setupQ4'></div>
</td>
</tr>
<tr>
<td class="left-cell cell-blue">
Objectives
</td>
<td class="centered-cell cell-grey">
<div id="objYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ4"></div>
</td>
</tr>
<tr>
<td class="left-cell cell-blue">
Project
</td>
<td class="centered-cell cell-grey">
<div id="assessmentYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ4"></div>
</td>
</tr>
<tr>
<td class="left-cell cell-blue">
Outcome
</td>
<td class="centered-cell cell-grey">
<div id="outcomeYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ4"></div>
</td>
</tr>
</table>
codepen demo
Or use negative margin and pseudo to make sure it does the required height:
[rowspan] {/*whatever selector you want to use , vertical-text class could be set onto the cell to make things easier :) */
min-width:1em;
vertical-align:bottom;/* decide to start from bottom or top to not mind text length */
}
.vertical-text {
font-size: 2em;
line-height:1.5em;
color: #FFFFFF;
float:left;
margin-right:-999px;/* reduce width virtually to very little */
transform:rotate(-90deg) translate(-50%,0);/* rotate and replace */
transform-origin:top left;
}
.vertical-text:before{/* here we go look for the height the text is suppose to use */
content:'';
float:left;
padding-top:100%;/* might be increased a little */
}
/* regular stuff */
.cell-blue {
color: #FFFFFF;
background-color: #2E9AFE;
}
.cell-grey {
color: #DEF0F6;
background-color: #D8D8D8;
}
td.wide-cell {
font-family: Arial;
text-align: center;
vertical-align: middle;
height: 45px;
width: 300px;
}
td.short-cell {
font-family: Arial;
text-align: center;
vertical-align: middle;
height: 45px;
width: 70px;
}
.centered-cell {
font-family: Arial;
text-align: center;
vertical-align: middle;
height: 60px;
width: 70px;
}
<table border="1" cellpadding="0" cellspacing="0" style="margin-left:30px; text-align:center; vertical-align:middle;">
<tr>
<td colspan="2" class="wide-cell cell-blue">
DATE
</td>
<td class="short-cell cell-blue">
YTD
</td>
<td class="short-cell cell-blue">
Q1
</td>
<td class="short-cell cell-blue">
Q2
</td>
<td class="short-cell cell-blue">
Q3
</td>
<td class="short-cell cell-blue">
Q4
</td>
</tr>
<tr>
<td rowspan='4' class='cell-blue'>
<div class='vertical-text'>Activities</div>
</td>
<td class='left-cell cell-blue'>
Setup Y/N
</td>
<td class='centered-cell cell-grey'>
<div id='setupYTD'></div>
</td>
<td class='centered-cell cell-grey'>
<div id='setupQ1'></div>
</td>
<td class="centered-cell cell-grey">
<div id='setupQ2'></div>
</td>
<td class="centered-cell cell-grey">
<div id='setupQ3'></div>
</td>
<td class="centered-cell cell-grey">
<div id='setupQ4'></div>
</td>
</tr>
<tr>
<td class="left-cell cell-blue">
Objectives
</td>
<td class="centered-cell cell-grey">
<div id="objYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ4"></div>
</td>
</tr>
<tr>
<td class="left-cell cell-blue">
Project
</td>
<td class="centered-cell cell-grey">
<div id="assessmentYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ4"></div>
</td>
</tr>
<tr>
<td class="left-cell cell-blue">
Outcome
</td>
<td class="centered-cell cell-grey">
<div id="outcomeYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ4"></div>
</td>
</tr>
</table>
codepen demo