如何控制一个表格单元格的大小在CSS

Question

我使用表格来创建这样一个图表：

所以这是我有：小提琴：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>

，看起来像这样：

怎样才能使绿色的单元格更小，就像在第一张图片，并把文本放在一行？

Answer 1

你应该能够做你想做的跟随您的旋转类别：

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

更新片段：

.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

通过将应用table-layout: fixed表比表列会从第一行的宽度，所以只设置宽度.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>