How to control the size of a table cell in css

Question

I am using tables to create a chart like this:

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:

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

Answer 1

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>

Answer 2

Apply table-layout: fixed to table and than table columns will take width from first row, so just set width to .column

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  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 {
  padding-top: 30%;
}
td.column {
  background-color: #99c71b;
  width: 40px;
}
table {
  table-layout: fixed;
}

<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>