Question

我在后面的代码中使用C＃创建一个tablecell，然后在单元格内的标签上添加一个CSS类来旋转它：

.vertical {color:#333;
                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
                -webkit-transform:rotate(270deg);
                -moz-transform:rotate(270deg);
                -o-transform: rotate(270deg);
                white-space:nowrap;
                display:block;
                }

问题是我旋转标签后，我的表格单元格（和表格）没有调整大小以适应新文本。有没有办法使用CSS或我可以使用的属性让我的表重新调整大小以适应新内容？

我很感激任何帮助。

--- --- EDIT 所以在玩了一些CSS类之后，我意识到了问题的根源。基本上，在我应用CSS更改后 - 我的表不会调整大小。它们的大小仍然像内容未被修改一样。

在CSS样式改变tablecells的大小后，是否可以使我的表重新调整大小？

Answer 1

您需要计算Label的新height，然后将其包含的元素设置为该高度。我正在谈论This fiddle。

<table>
    <tr>
        <td id="someLabel" class="vertical">some stuff</td>
        <td>some other stuff sljk fkas jd</td>
    </tr>    
    ...
</table>

然后使用jQuery

$.fn.textWidth = function () {
    var html_org = $(this).html();
    var html_calc = '<span>' + html_org + '</span>';
    $(this).html(html_calc);
    var width = $(this).find('span:first').width();
    $(this).html(html_org);
    return width;
};

$(function(){
    var someLabelSize = $("#someLabel").textWidth();
    $("#someLabel").css("height", (someLabelSize + 5));    
});

只需更改选择器即可反映您的需求。

Css更改了asp tablecell，而没有调整它的大小

1 个答案: