如何让Bootstrap Table表头单元格全高度支持排序点击？

使用Bootstrap Table时发现：短文本表头仅文本区域可触发排序点击，长文本表头的整个蓝色背景区域都能触发排序。曾参考《Make a DIV fill an entire table cell》相关回答，但未找到适配表头单元格全高度排序点击的方案，寻求解决办法。

解决方法 #

问题核心是Bootstrap Table生成的排序触发元素（.sortable）默认是行内元素，短文本场景下仅包裹内容高度，导致单元格空白区域无法触发点击。只需通过CSS将该元素设置为块级元素并填满整个表头单元格即可。

新增CSS样式 #

在现有样式中添加以下代码：

/* 确保表头单元格高度可被内部元素继承 */
.bootstrap-table .fixed-table-container .table thead th {
    height: 100%;
}
/* 让排序触发元素填满整个表头单元格 */
.bootstrap-table .fixed-table-container .table thead th .sortable {
    display: block;
    height: 100%;
    width: 100%;
    padding: .5rem .5rem; /* 保留原内边距，避免内容紧贴边框 */
}

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
        <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
        <link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
        <style>
    .bgcolor {
      background-color: #06AEF8;
    }
    .bootstrap-table .fixed-table-container .table {
table-layout: fixed;
      border-color: #A2A9B1 !important;
      text-align: center;
    }
    /* 新增样式：让排序触发元素填满整个表头单元格 */
    .bootstrap-table .fixed-table-container .table thead th {
        height: 100%;
    }
    .bootstrap-table .fixed-table-container .table thead th .sortable {
        display: block;
        height: 100%;
        width: 100%;
        padding: .5rem .5rem;
    }
    .bootstrap-table .fixed-table-container .table thead th .both {
      background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='%23000000' opacity='0.56'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
      background-size: 19px, 19px;
      white-space: inherit;
      word-break: break-word;
    }
    .bootstrap-table .fixed-table-container .table thead th .asc {
      background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3C/svg%3E");
      background-size: 19px, 19px;
    }
    .bootstrap-table .fixed-table-container .table thead th .desc {
      background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
      background-size: 19px, 19px;
    }
    .bootstrap-table .fixed-table-container .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
      background-color: #B9B9B9; 
    }
        </style>
    </head>
    <body>
        <div class="container">
            <table data-toggle="table" class="table table-striped">
                <thead>
                    <tr class="bgcolor">
                        <th data-sortable="true" data-sort-order="desc" class="align-middle">Test</th>
                        <th data-sortable="true" data-sort-order="desc" class="align-middle">Bla-bla-bla-bla-bla-bla-blaBla-bla-bla-bla-bla-bla-blaBla-bla-bla-bla-bla-bla-bla</th>
                        <th data-sortable="true" data-sort-order="desc" class="align-middle">Another test</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>A</td>
                        <td>B</td>
                        <td>C</td>
                    </tr>
                    <tr>
                        <td>E</td>
                        <td>F</td>
                        <td>G</td>
                    </tr>
                    <tr>
                        <td>H</td>
                        <td>I</td>
                        <td>J</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Paul Berger