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

的其他可能性

当单元格包含旋转（垂直）文本时，在css中设置单元格宽度

1 个答案: