Wosley Alarico Wosley Alarico - 2 months ago 6
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

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>

Comments