Wosley Alarico Wosley Alarico - 1 year ago 81
CSS Question

How to control the size of a table cell in css

I am using tables to create a chart like this:

enter image description here

So this is what I have: fiddle:https://jsfiddle.net/Wosley_Alarico/e8xmp6oh/



.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
}
body.page.page-id-7.page-template-default.logged-in.admin-bar.wp-custom-logo.debug-bar-maximized.customize-support img {
width: 100px !important;
}
td {
/* letter-spacing: inherit; */
padding-top: 30%;
}
td.column {
background-color: #99c71b;
/* max-height: 586px !important; */
}

<table>
<tbody>
<tr>
<td class="column" rowspan="6">
<p class="rotate">Specialised Businesses</p>
</td>
</tr>
<tr>
<td>
<img class="alignnone size-medium wp-image-310" src="http://localhost/sidimaag/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" />General Manager</td>
</tr>
<tr>
<td>
<img class="alignnone size-medium wp-image-310" src="http://localhost/sidimaag/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" />
</td>
</tr>
<tr>
<td>
<img class="alignnone size-medium wp-image-310" src="http://localhost/sidimaag/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" />
</td>
</tr>
<tr>
<td>
<img class="alignnone size-medium wp-image-310" src="http://localhost/sidimaag/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" />
</td>
</tr>
<tr>
<td>
<img class="alignnone size-medium wp-image-310" src="http://localhost/sidimaag/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" />
</td>
</tr>
</tbody>
</table>





Which looks like this:

enter image description here

How can make the green cell smaller like in the first picture and put the text in one line?

Answer Source

You should be able to do what you want by adding the following to your rotate class:

white-space:nowrap;
width:1.5em;         /* whatever width you want */
overflow:visible;

Updated snippet:

.rotate {
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
  white-space: nowrap;
  width: 1.5em;
  overflow: visible;
}
body.page.page-id-7.page-template-default.logged-in.admin-bar.wp-custom-logo.debug-bar-maximized.customize-support img {
  width: 100px !important;
}
td {
  /* letter-spacing: inherit; */
  padding-top: 30%;
}
td.column {
  background-color: #99c71b;
  /* max-height: 586px !important; */
}
<table>
  <tbody>
    <tr>
      <td class="column" rowspan="6">
        <p class="rotate">Specialised Businesses</p>
      </td>
    </tr>
    <tr>
      <td>
        <img class="alignnone size-medium wp-image-310" src="http://localhost/sidimaag/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" />General Manager</td>
    </tr>
    <tr>
      <td>
        <img class="alignnone size-medium wp-image-310" src="http://localhost/sidimaag/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" />
      </td>
    </tr>
    <tr>
      <td>
        <img class="alignnone size-medium wp-image-310" src="http://localhost/sidimaag/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" />
      </td>
    </tr>
    <tr>
      <td>
        <img class="alignnone size-medium wp-image-310" src="http://localhost/sidimaag/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" />
      </td>
    </tr>
    <tr>
      <td>
        <img class="alignnone size-medium wp-image-310" src="http://localhost/sidimaag/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" />
      </td>
    </tr>
  </tbody>
</table>