How can I make the entire blue rectangle clickable for the sorting thing? I mean, if the text is pretty short, I can only click around the text, but not anywhere inside the blue area. The entire blue area for the "Bla-bla-bla" thing is clickable most likely because the text is already very long.
You can see the issue here: https://streamable.com/h2jugw
How can I fix this? Any ideas?
P.S.: I tried to see the answers posted here: Make a DIV fill an entire table cell but I have no idea which answer can help me... There's not a single response that refers to sort click targeting the full height of the table heading cell... :/ Please help me. :(
<!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 .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>
