基于角度字大小自动调整行的大小

Question

我想创建一个HTML表格，我希望我的标题旋转45度。

我发现我可以在Web上使用的几个例子。 但是，标题行高度不会调整为输入的文本大小。文本只是包装在单元格中。

如何让我行自动根据角度的调整文本单元格高度？

我的代码

HTML

<div class="scrollable-table"> 
    <table class="table table-striped table-header-rotated"> 
     <thead> 
     <tr> 
      <!-- First column header is not rotated --> 
      <th></th> 
      <!-- Following headers are rotated --> 
      <th class="column criterion rotate-45" ><div><span>Column header 1</span></div></th> 
      <th class="column criterion rotate-45" ><div><span>Column header 2</span></div></th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <th class="row-header">Row header 1</th> 
      <td><input checked="checked" name="column1[]" type="radio" value="row1-column1"></td> 
      <td><input checked="checked" name="column2[]" type="radio" value="row1-column2"></td> 
     </tr> 
     <tr> 
      <th class="row-header">Row header 2</th> 
      <td><input name="column1[]" type="radio" value="row2-column1"></td> 
      <td><input name="column2[]" type="radio" value="row2-column2"></td> 
     </tr> 
     <tr> 
      <th class="row-header">Row header 3</th> 
      <td><input name="column1[]" type="radio" value="row3-column1"></td> 
      <td><input name="column2[]" type="radio" value="row3-column2"></td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</body> 

CSS

.table-header-rotated th.row-header{ 
    width: auto; 
} 

.table-header-rotated td{ 
    width: 40px; 
    border-top: 1px solid #dddddd; 
    border-left: 1px solid #dddddd; 
    border-right: 1px solid #dddddd; 
    vertical-align: middle; 
    text-align: center; 
} 

.table-header-rotated th.rotate-45{ 
    height: 80px; 
    width: 40px; 
    min-width: 40px; 
    max-width: 40px; 
    position: relative; 
    vertical-align: bottom; 
    padding: 0; 
    font-size: 12px; 
    line-height: 0.8; 
} 

.table-header-rotated th.rotate-45 div{ 
    position: relative; 
    top: 0px; 
    left: 40px; /* 80 * tan(45)/2 = 40 where 80 is the height on the cell and 45 is the transform angle*/ 
    height: 100%; 
    -ms-transform:skew(-45deg,0deg); 
    -webkit-transform:skew(-45deg,0deg); 
    transform:skew(-45deg,0deg); 
    overflow: hidden; 
    border-left: 1px solid #dddddd; 
    border-right: 1px solid #dddddd; 
    border-top: 1px solid #dddddd; 
} 

.table-header-rotated th.rotate-45 span { 
    -ms-transform:skew(45deg,0deg) rotate(315deg); 
    -webkit-transform:skew(45deg,0deg) rotate(315deg); 
    transform:skew(45deg,0deg) rotate(315deg); 
    position: absolute; 
    bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/ 
    left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/ 
    display: inline-block; 
    width: 85px; /* 80/cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/ 
    text-align: left; 
    /* white-space: nowrap; *//*whether to display in one line or not*/ 
} 

请参阅 http://jsfiddle.net/ephreal/9kxd3chm/

编辑 我做了一个搜索解决方案n是基于Jquery的。 我根据文本字符串的像素长度计算行高。 我发现的其他一些值在我的情况下可能只是静态的。请参阅我 Fiddle

问候

Answer 1

您需要添加空白：NOWRAP;到您的标题样式

.table-header-rotated th.rotate-45 { 
    height: 80px; 
    width: 40px; 
    min-width: 40px; 
    max-width: 40px; 
    position: relative; 
    vertical-align: bottom; 
    padding: 0; 
    font-size: 12px; 
    line-height: 0.8; 
    white-space: nowrap; 
} 

http://jsfiddle.net/nvucgfmk/1/