0

I am trying to create an HTML table that has vertically rotated header columns, much like you might see in Excel. I've used some code snippets to get the text rotation working fine, but I am having trouble with the word wrap.

The problem that I am running into is that the word wrap is occurring based upon the horizontal width of the cell (40px), when what I really want is to word wrap based upon the vertical height (120px) of the cell. I recognize this is happening because the word wrap is occurring first, and text rotation is occurring second.

Is it possible to specify the word wrap distance (characters or pixels) based on the rotated size of text in a table cell?

In my example below, I want "Bear Creek" on one line and "Cascadilla Flat River Access" on two lines. I dont mind adjusting the vertical distance to the appropriate size, but want a fixed width across all columns.

:root{
  --firstrow-rotation: -90.0deg;}
  --firstrow-msrotate: 1; 
}

  
  table.tableizer-table {
  font-size: 12px;
  border: 2px solid #CCC; 
  font-family: Arial, Helvetica, sans-serif;
    table-layout:fixed;
 } 
 .tableizer-table td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
    text-align: center;
 }
 .tableizer-firstrow th {
  background-color: #86a755; 
  color: #FFF;
    height: 120px;
 }
  
.rotate {
 filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=1);  /* IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=var(--firstrow-rotation))"; /* IE8 */
    -moz-transform: rotate(var(--firstrow-rotation));  /* FF3.5+ */
     -ms-transform: rotate(var(--firstrow-rotation));  /* IE9+ */
      -o-transform: rotate(var(--firstrow-rotation));  /* Opera 10.5 */
  -webkit-transform: rotate(var(--firstrow-rotation));  /* Safari 3.1+, Chrome */
         transform: rotate(var(--firstrow-rotation));  /* Standard */
  width: 40px;
}
<table class="tableizer-table">
<thead><tr class="tableizer-firstrow"><th><div class="rotate"></div></th><th><div class="rotate">Bear Creek</div></th><th><div class="rotate">Essex Creek</div></th><th><div class="rotate">Paola River Access</div></th><th><div class="rotate">Cascadilla Flat River Access</div></th><th><div class="rotate">Moccasin Creek</div></th><th><div class="rotate">West Glacier River Access</div></th><th><div class="rotate">Blankenship Bridge</div></th><th><div class="rotate">House of Mystery</div></th><th><div class="rotate">Teakettle FAS</div></th></tr></thead><tbody>
 <tr><td>Bear Creek</td><td>-</td><td>4.5</td><td>11.5</td><td>23.0</td><td>30.0</td><td>38.5</td><td>44.0</td><td>55.0</td><td>69.5</td></tr>
 <tr><td>Essex Creek</td><td>4.5</td><td>-</td><td>7.0</td><td>18.5</td><td>25.5</td><td>34.0</td><td>39.5</td><td>50.5</td><td>65.0</td></tr>
 <tr><td>Paola River Access</td><td>11.5</td><td>7.0</td><td>-</td><td>11.5</td><td>18.5</td><td>27.0</td><td>32.5</td><td>43.5</td><td>58.0</td></tr>
 <tr><td>Cascadilla Flat River Access</td><td>23.0</td><td>18.5</td><td>11.5</td><td>-</td><td>7.0</td><td>15.5</td><td>21.0</td><td>32.0</td><td>46.5</td></tr>
 <tr><td>Moccasin Creek</td><td>30.0</td><td>25.5</td><td>18.5</td><td>7.0</td><td>-</td><td>8.5</td><td>14.0</td><td>25.0</td><td>39.5</td></tr>
 <tr><td>West Glacier River Access</td><td>38.5</td><td>34.0</td><td>27.0</td><td>15.5</td><td>8.5</td><td>-</td><td>5.5</td><td>16.5</td><td>31.0</td></tr>
 <tr><td>Blankenship Bridge</td><td>44.0</td><td>39.5</td><td>32.5</td><td>21.0</td><td>14.0</td><td>5.5</td><td>-</td><td>11.0</td><td>25.5</td></tr>
 <tr><td>House of Mystery</td><td>55.0</td><td>50.5</td><td>43.5</td><td>32.0</td><td>25.0</td><td>16.5</td><td>11.0</td><td>-</td><td>14.5</td></tr>
 <tr><td>Teakettle FAS</td><td>69.5</td><td>65.0</td><td>58.0</td><td>46.5</td><td>39.5</td><td>31.0</td><td>25.5</td><td>14.5</td><td>-</td></tr>
</tbody></table>
RyanKDalton
  • 1,271
  • 3
  • 14
  • 30

0 Answers0