css – 如何在没有文本溢出的情况下在列标题中显示垂直文本,也不扩展其他列的宽度

2023年7月23日 159次阅读

我想构建一个带有垂直列标题的表,如图
here所示.但是列标题中的文本可以是变量的,所以当我在列标题中有更多文本时,文本会溢出.

我的问题是如何增加该特定列的宽度,以便文本不会溢出.

here链接到我的代码.我还粘贴了下面的代码.

<table id="example" class="dataTable display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th class="rank">Rank</th>
            <th class="wider">User Inserted Title Name</th>
            <th class="rotate"><div><div class="textH">Fisrt Number second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>System Architect and Analyser</td>
            <td>1</td>
            <td>4</td>
            <td>6</td>
            <td>20</td>
            <td>5</td>
            <td>1</td>
            <td>4</td>
            <td>6</td>
            <td>20</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Accountant</td>
            <td>4</td>
            <td>13</td>
            <td>7</td>
            <td>11</td>
            <td>8</td>
            <td>1</td>
            <td>4</td>
            <td>6</td>
            <td>20</td>
            <td>5</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Junior Technical Author</td>
            <td>5</td>
            <td>26</td>
            <td>9</td>
            <td>3</td>
            <td>19</td>
            <td>1</td>
            <td>4</td>
            <td>6</td>
            <td>20</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

CSS：

.dataTable th 
{
 word-wrap: break-word;
}
td, th 
{
border: 1px solid #000;
}
th.rank 
{
width: 20px !important;
}
th.wider 
{
/*width: 120px !important;*/
}
th.rotate 
{
height: 150px;
padding: 0px;
/*width: 20px !important;*/
font-weight: normal;
vertical-align:bottom;  
}
th.rotate > div 
{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
width: 50px;
}

.textH
{
// overflow:visible:
height: 150px !important;
width: 150px !important;
text-align:left;   
}

最佳答案 那么,我会做什么：
Codepen

它需要几行JavaScript.我们的想法是通过JS脚本计算宽度和高度.如果您希望它完全响应,也应该进行修改.

点赞