format a rotated table head html

Hi expert,

After some searching I've found a working code snippet that works in most browsers.
But the length (in characters)of the rotated table head still determines the width of the column.
I would like to make content between the <td> tags determine the width of the column.
How can I do this with CSS? And how can I make the rotated table head valign on the bottom of its cell?

<html>
<head>
<style>
table, td, th {
  border-spacing: 0;
  border: 1px solid;
  border-collapse: collapse;
  text-align: center;
  table-layout: fixed;
  white-space: nowrap;
}

.vert > th > div {
  overflow: hidden;
}

.vert > th > div > div {
  display: inline-block;
  vertical-align: middle;
  transform: rotate(-90deg);
  line-height: 1em;
}

.vert > th > div:before {
  content: "";
  height: 0;
  padding-top: 100%;
  display: inline-block;
  vertical-align: middle;
}
td {white-space: nowrap;}

</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th colspan=3>th</th>
      <th colspan=3>th</th>
    </tr>
    <tr class="vert">
      <th><div><div>The first rotated header goes here</div></div></th>
      <th><div><div>The second rotated header goes here</div></div></th>
      <th><div><div>The third rotated header</div></div></th>
      <th><div><div>One more rotated header</div></div></th>
      <th><div><div>And even more</div></div></th>
      <th><div><div>And the last one</div></div></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Open in new window

LVL 1
SteynskAsked:
Who is Participating?
 
Leonidas DosasCommented:
Set to the table  CSS the follwing
  word-wrap:break-word and table-layout:fixed

Open in new window

0
 
SteynskAuthor Commented:
Thank you
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.