0

I have a table with headings that are rotated and then the height is dynamically resized so it doesn't overlap the content above. Please see this Fiddle to understand what I mean.

I want to make column 2 width the size of a checkbox ie same as column 1. But I do not want to fix the table width. 

.verticalTableHeader {
  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);
}
.verticalTableHeader p {
  margin: 0 -100%;
  display: inline-block;
}
.verticalTableHeader 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
}
<table border="1">
  <tr>
    <th class="verticalTableHeader">
      <p>First</p>
    </th>
    <th class="verticalTableHeader">
      <p>Secondlongheadear</p>
    </th>
    <th>
      <p>Third</p>
    </th>
  </tr>
  <tr>
    <td>
      <input class='checkbox' type='checkbox'>
    </td>
    <td>
      <input class='checkbox' type='checkbox'>
    </td>
    <td>this is fine</td>
  </tr>
  <tr>
    <td>
      <input class='checkbox' type='checkbox'>
    </td>
    <td>
      <input class='checkbox' type='checkbox'>
    </td>
    <td>responsive</td>
  </tr>
  <tr>
    <td>
      <input class='checkbox' type='checkbox'>
    </td>
    <td>
      <input class='checkbox' type='checkbox'>
    </td>
    <td>not fixed width</td>
  </tr>
</table>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Phil
  • 2,176
  • 10
  • 33
  • 56
  • Take a look at this https://codepen.io/anon/pen/egNRPq – Kuja Jan 06 '17 at 23:42
  • looks like a duplicate of http://stackoverflow.com/questions/6997631/how-to-display-vertical-text-in-table-headers-with-auto-height-without-text-ov/ writing-mode is also an hint http://codepen.io/gc-nomade/pen/EKQKBe https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode ... your fiddle with writing mode http://jsfiddle.net/ansvy75g/15/ ... – G-Cyrillus Jan 06 '17 at 23:59
  • @KujAslani I need a dynamic height that changes with the text. It looks to me like you fixed the height. – Phil Jan 09 '17 at 15:55
  • @GCyrillus I copied that example to start. I can't use a fixed width table though. Writing mode doesn't work when i try it. – Phil Jan 09 '17 at 15:59
  • 1
    which is your browser ? http://caniuse.com/#search=writing-mode did tthe fiddle worked for you ? By the way , there is some mistakes in the css you provided. among them some javascript comment :) – G-Cyrillus Jan 09 '17 at 19:36
  • @GCyrillus you are right, the example works on my browser. I need to fix my fiddle. I think this will work. – Phil Jan 09 '17 at 20:11
  • 1
    @GCyrillus Got it working I just need to use writing-mode and nowrap. also it cant be on the th. it has to be on the element inside. – Phil Jan 09 '17 at 21:02

0 Answers0