数据表引导对齐旋转标题答案

【问题标题】：Datatable bootstrap align rotate header数据表引导对齐旋转标题
【发布时间】：2021-04-27 05:18:31
【问题描述】：

我需要帮助将标题标签与底部中心对齐。

这就是我现在拥有的：

HTML

<div class="container">
    <table id="example" class="table table-bordered table-small-font table-striped table-hover" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th class="vert-align" rowspan="3">NUM.</th>
                <th class="vert-align text-center" rowspan="3">DEPARTMENT</th>
                <th class="vert-align text-center sum_currency" colspan="2">EXPENDITURE</th>
                <th colspan="4" class="vert-align text-center">DISPOSE BUILDING STRUCTURE/ BUILDING COMPONENT</th>
                <th colspan="4" class="vert-align text-center">LAND DISPOSAL/ BUILDING/ INFRASTRUCTURE</th>
                <th colspan="10" class="vert-align text-center">DISPOSE METHOD</th>
            </tr>
            <tr>
                <th rowspan="2" class="vert-align text-center">ALLOCATION</th>
                <th rowspan="2" class="vert-align text-center">EXPENDITURE PROGRESS %</th>
                <th colspan="2" class="vert-align text-center">COUNT</th>
                <th colspan="2" class="vert-align text-center">CURRENT VALUE</th>
                <th colspan="2" class="vert-align text-center">COUNT</th>
                <th colspan="2" class="vert-align text-center">CURRENT VALUE</th>
                <th colspan="5" class="vert-align text-center">BUILDING STRUCTURE COUNT/ BUILDING COMPONENT
                <th colspan="5" class="vert-align text-center">COUNT LAND/BUILDING/INFRASTRUCTURE</th>
            </tr>
            <tr>
                <th class="rotated-text"><div><span>ESTIMATE</span></div></th>
                <th class="rotated-text"><div><span>EXACT</span></div></th>
                <th class="rotated-text"><div><span>ESTIMATE</span></div></th>
                <th class="rotated-text"><div><span>EXACT</span></div></th>
                <th class="rotated-text"><div><span>ESTIMATE</span></div></th>
                <th class="rotated-text"><div><span>EXACT</span></div></th>
                <th class="rotated-text"><div><span>ESTIMATE</span></div></th>
                <th class="rotated-text"><div><span>EXACT</span></div></th>
                <th class="rotated-text"><div><span>DEMOLISH</span></div></th>
                <th class="rotated-text"><div><span>SALE</span></div></th>
                <th class="rotated-text"><div><span>TRANSFER</span></div></th>
                <th class="rotated-text"><div><span>GIFT</span></div></th>
                <th class="rotated-text"><div><span>BARTER</span></div></th>
                <th class="rotated-text"><div><span>OWNERSHIP <br>TRANSFER</span></div></th>
                <th class="rotated-text"><div><span>RELEASE</span></div></th>
                <th class="rotated-text"><div><span>RETURN OF <br>OWNERSHIP</span></div></th>
                <th class="rotated-text"><div><span>LEASE</span></div></th>
                <th class="rotated-text"><div><span>CHANGE OF USE</span></div></th>
            </tr>
            <tfoot>
                <tr>
                    <th class="text-center expand" colspan="2">TOTAL</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                    <th class="text-right">&nbsp;</th>
                </tr>
            </tfoot>
        </thead>
    </table>
</div>

CSS

.table>thead>tr>th {
  background-color: lightgoldenrodyellow;
}

.table>thead>tr>th.vert-align {
  vertical-align: middle;
}

th.rotated-text {
    height: 140px;
    white-space: nowrap;
    padding: 0 !important;
}

th.rotated-text > div {
    transform:rotate(-90deg);
    width: 30px;
}

th.rotated-text > div > span {
    padding: 0px 15px;
}

Javascript

$(document).ready(function() {
    $('#example').DataTable( {
         responsive: true,
         dom: 'Bfrtip',
         "bSort": false,
    buttons: [
        'copy', 'excel', 'pdf', 'csv'
    ]
} );
    
    
} );

jsfiddle：https://jsfiddle.net/64adk8gr/

完整视图：https://jsfiddle.net/64adk8gr/show

请帮助我。提前致谢。

【问题讨论】：

你需要使用:nth-child()来对齐东西可以吗？ nimb.ws/oJu91N 这意味着您需要在文本更改时更改它们。
我不喜欢使用:nth-child()
标题标签是什么？根本没有标签。你的意思是像 Num, department , allocation 等那些文本？你想要它垂直还是保持水平但底部居中？
是的那些文本，例如Num, department , allocation。我希望文本垂直和底部居中，如上图所示。
您想为每个<th> 执行此操作吗？或者只是里面的第一个<tr>？第二？两者都有？

标签： html css twitter-bootstrap datatables css-transforms

【解决方案1】：

您可以通过在.rotated-tex > div 元素上使用position: absolute 来获得此布局，然后您可以使用：

th.rotated-text > div {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: rotate(-90deg) translateY(-50%);
  transform-origin: 0 0;
}

这是最终结果的截图：

看看this JsFiddle

【讨论】：

我不知道translateY。感谢您的帮助。