Keeping the table heading row height large enough for the rotated text

Question

Here is a fiddle:

Here are a couple of pertinent CSS classes:

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

.cellVerticalHeading p {
    margin:0 -100% ;
    display:inline-block;
}

The problem I have is when printing to A4 portrait, which you can see in the preview anyway:

What CSS do I need so that when I print on A4 the header row is going to be tall enough for text? There are three affected columns over to the right.

Update

Based on this question I was able to do:

    <thead class="rowHeadings">
        <tr>
            <th><div class="cellVerticalHeading">Name</div></th>
            <th><div class="cellVerticalHeading">Gender</div></th>
            <th><div class="cellVerticalHeading">Appointed As</div></th>
            <th><div class="cellVerticalHeading">Serving As</div></th>
            <th><div class="cellVerticalHeading">Attendant</div></th>
            <th><div class="cellVerticalHeading">CBS Conductor</div></th>
            <th><div class="cellVerticalHeading">CBS Reader</div></th>
            <th><div class="cellVerticalHeading">Midweek Chairman</div></th>
            <th><div class="cellVerticalHeading">Microphone</div></th>
            <th><div class="cellVerticalHeading">Platform</div></th>
            <th><div class="cellVerticalHeading">Midweek Prayer</div></th>
            <th><div class="cellVerticalHeading">Sound</div></th>
            <th><div class="cellVerticalHeading">Student</div></th>
            <th><div class="cellVerticalHeading">Assistant</div></th>
            <th><div class="cellVerticalHeading">Host</div></th>
            <th><div class="cellVerticalHeading">Co-host</div></th>
            <th><div class="cellVerticalHeading">Midweek Meeting — Treasures</div></th>
            <th><div class="cellVerticalHeading">Midweek Meeting — Gems</div></th>
            <th><div class="cellVerticalHeading">Midweek Meeting — Living</div></th>
            <th><div class="cellVerticalHeading">Demonstrations</div></th>
        </tr>
    </thead>

But now the headings are not central to the cells:

Update 2

I tred the answer provided (thank you) and whilst the data now fits, it too suffers from the text not being central to the cells:

use writing mode instead: https://stackoverflow.com/a/58038952/8620333 — Temani Afif, Nov 11 '20 at 10:39

score 1 · Answer 1 · answered Nov 11 '20 at 11:06

Nowdays , You may take a look at writing-mode instead transform:

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

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

table th,
td {
  border: 1px #d3d3d3 solid;
  padding: 2px;
}

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

.rowHeadings {
  background-color: gray;
}
/** UPDATE on the p itself */
.cellVerticalHeading p {
  white-space: nowrap;
  writing-mode: vertical-rl;
  margin: 0 -100%;
  display: inline-block;
  padding: 0.5em 0;
}
/* end Update */


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

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

<!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>
      </th>
      <th class="cellVerticalHeading">
        <p>Assistant</p>
      </th>
      <th class="cellVerticalHeading">
        <p>Host</p>
      </th>
      <th class="cellVerticalHeading">
        <p>Co-host</p>
      </th>
      <th class="cellVerticalHeading">
        <p>Midweek Meeting — Treasures</p>
      </th>
      <th class="cellVerticalHeading">
        <p>Midweek Meeting — Gems</p>
      </th>
      <th class="cellVerticalHeading">
        <p>Midweek Meeting — Living</p>
      </th>
      <th class="cellVerticalHeading">
        <p>Demonstrations</p>
      </th>
    </thead>
    <tbody>
      <tr>
        <td><span lang="en-gb">Name 1</span></td>
        <td>Male</td>
        <td>Not appointed</td>
        <td>Publisher</td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment"></td>
      </tr>
      <tr>
        <td><span lang="en-gb">Name 2</span></td>
        <td>Female</td>
        <td>Not appointed</td>
        <td>Publisher</td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
      </tr>
      <tr>
        <td><span lang="en-gb">Name 3</span></td>
        <td>Male</td>
        <td>Not appointed</td>
        <td>Publisher</td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment">✔</td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
        <td class="cellAssignment"></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

score 0 · Accepted Answer · answered Nov 11 '20 at 10:52

Change Some CSS

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

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

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

.rowHeadings {
    background-color: gray;
}

.cellVerticalHeading p { /*Change Here*/
    /*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 {/*Change Here*/
    display:inline-block;
    line-height: 5.2;
}

.cellVerticalHeading p:before{/*Change Here*/
    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 ;
    }*/
}

https://jsfiddle.net/lalji1051/pvwg6ur0/2/

maybe you could have linked to that answer :) https://stackoverflow.com/questions/6997631/how-to-display-vertical-text-in-table-headers-with-auto-height-without-text-ov/22177247#22177247 — G-Cyrillus, Nov 11 '20 at 11:16

Keeping the table heading row height large enough for the rotated text

Update

Update 2

2 Answers2