Reputation: 3614
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?
Upvotes: 2
Views: 81
Reputation: 58462
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>
Upvotes: 2
Reputation: 43565
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>
Upvotes: 0