html - 当单元格包含旋转(垂直)文本时，在 css 中设置 单元格宽度

Question

我正在尝试修复包含旋转文本的单元格的宽度。除了前 3 列之外，其余列只需稍微超过垂直文本字体的高度。剩余空间可以平均分配给前 3 列。

我试过在 CSS 中设置单元格宽度，但没有任何区别...

这里有一个例子http://jsfiddle.net/pelagic/3Ggw6/1/

HTML

<div id="galley">
<table>
<thead><tr>
  <th colspan="3" class="vertical-label">&nbsp;</th>
  <th colspan="11"><div>Regions</div></th>
  <th width="5%" class="vertical-label">&nbsp;</th>
</tr>
  <tr>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">One</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">One</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">One</div>
    </div></th>
    <th width="10" class="vertical-label"><div class="vheader">
      <div align="left">Antarctic</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Arctic</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Baltic&nbsp;Sea</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Black&nbsp;Sea</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Cas&#8226;pian&nbsp;Sea</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">Indo&nbsp;Pacific</div>
    </div></th>
    <th width="30" class="vertical-label"><div class="vheader">
      <div align="left">Mediterranean&nbsp;Sea</div>
    </div></th>
    <th width="5%" height="150" class="vertical-label"><div class="vheader">
      <div align="left">North&nbsp;Atlantic</div>
    </div></th>
   <th width="5%" height="150" class="vertical-label"><div class="vheader">
      <div align="left">North&nbsp;Pacific</div>
    </div></th>
    <th width="5%" height="150" class="vertical-label"><div class="vheader">
      <div align="left">South&nbsp;Atlantic</div>
    </div></th>
    <th width="auto" height="150" class="vertical-label"><div class="vheader">
      <div align="left">South&nbsp;Pacific</div>
    </div></th>
    <th width="5%" class="vertical-label"><div class="vheader">
      <div align="left">References</div>
    </div></th>
  </tr>
</thead>
<tfoot></tfoot>
<tbody><tr><td>Otariidae</td>
<td>Arctocephalus  pusillus</td>
<td>Cape or Australian fur  seal</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;    </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr class="alt"><td>&nbsp;</td><td>Arctophoca gazella</td>
<td>Antarctic fur seal</td>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>A. tropicalis</td>
<td>Subantarctic fur seal</td>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</tbody>
</table>
</div>

CSS

#galley {
    width: 738px;
height: auto;
border: 1px #CCCCCC;
float:none
}

#galley table, th, td {
border: 1px solid black;
border-collapse:collapse;
}

#galley table {
table-layout: fixed;
width: 738px;
}

#galley th.vertical-label{      
-webkit-transform: rotate(270deg) translateX(100%) translateY(33%);
-moz-transform: rotate(270deg) translateX(100%) translateY(33%);
-o-transform: rotate(270deg) translateX(100%) translateY(33%);
 -webkit-transform-origin: 100% 100%;
 -moz-transform-origin: 100% 100%;
 -o-transform-origin: 100% 100%;
 writing-mode: lr-tb;
 }

#galley th, th.vertical-label{
font-family: "myriad Pro";
font-decoration: bold;

}

#galley .vheader{
margin-left: 5px;
}

Answer 1

要让您的单元格根据其内容增长，旋转的除外，您需要确保旋转的文本不会扩展您的单元格。

它们可以设置为绝对值，也可以设置为带负边距的虚拟值。

负边距，他们将不需要空间。但是您需要单元格垂直增长，为此，请使用垂直填充为 % 的伪元素。

DEMO 一起玩

---

方法:

这将绘制一个正方形，在达到 999px X 2 宽度之前不需要水平空间，高度将根据其宽度增长:

 td div.text-rotated {
margin-:0 -999px;
}
td div.text-rotated:before {
padding-top:100%;
content:'';
display:inline-block;
}

其他可能性 naive menu