数据表 bootstrap 对齐旋转 header

Question

我需要帮助才能像这样将 header 标签与底部中心对齐。

这是我现在拥有的：

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

请帮助我。提前致谢。

Answer 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

数据表 bootstrap 对齐旋转 header

Datatable bootstrap align rotate header

html

css

datatables

css-transforms

twitter-bootstrap