Vertcal Column Headings

by Lalji Tadhani

HTML

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr" xmlns:msa="http://www.publictalksoftware.co.uk/msa">
  <head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Publishers Assignments Report</title>
    <link rel="stylesheet" type="text/css" href="Custom--Publishers Report.css">
  </head>
  <body>
    <table>
      <colgroup>
        <col width="20%">
        <col width="5%">
        <col width="10%">
        <col width="10%">
        <col width="*">
        <col width="*">
        <col width="*">
        <col width="*">
        <col width="*">
        <col width="*">
        <col width="*">
        <col width="*">
        <col width="*">
        <col width="*">
        <col width="*">
        <col width="*">
      </colgroup>
      <thead class="rowHeadings">
        <th class="cellVerticalHeading">Name</th>
        <th class="cellVerticalHeading">
          <p>Gender</p>
        </th>
        <th class="cellVerticalHeading">
          <p>Appointed As</p>
        </th>
        <th class="cellVerticalHeading">
          <p>Serving As</p>
        </th>
        <th class="cellVerticalHeading">
          <p>Attendant</p>
        </th>
        <th class="cellVerticalHeading">
          <p>CBS Conductor</p>
        </th>
        <th class="cellVerticalHeading">
          <p>CBS Reader</p>
        </th>
        <th class="cellVerticalHeading">
          <p>Midweek Chairman</p>
        </th>
        <th class="cellVerticalHeading">
          <p>Microphone</p>
        </th>
        <th class="cellVerticalHeading">
          <p>Platform</p>
        </th>
        <th class="cellVerticalHeading">
          <p>Midweek Prayer</p>
        </th>
        <th class="cellVerticalHeading">
          <p>Sound</p>
        </th>
        <th class="cellVerticalHeading">
          <p>Student</p>
     ...

CSS

body {
	font-family: Calibri;
	font-size: 10pt;
}

table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}
table th{
    overflow: hidden;
}
table th, td {
    border: 1px #d3d3d3 solid;
    padding:2px;
}

table tbody tr:hover td {
	color: #000;
	background: #efefef;
}

.rowHeadings {
	background-color: gray;
}

.cellVerticalHeading p {
    /*text-align:center;*/
    white-space:nowrap;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    
}

.cellVerticalHeading p {
    display:inline-block;
    line-height: 5.2;
}

.cellVerticalHeading p:before{
    content:'';
    width:0;
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
}

.cellAssignment{
	text-align:center;
	vertical-align:middle;
}

@media print {
   thead {
       display: table-header-group;
   }

   /*table tbody tr td:before,
   table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }*/
}