Is it possible to make the entire blue rectangle clickable for sorting purposes? Currently, I can only click around the text if it is short, but not within the blue area. When the text is longer, like in the case of "Bla-bla-bla," the entire blue area becomes clickable.
You can view the problem here:
Any suggestions on how to fix this issue? 🤔
P.S.: I've tried looking at some answers here: Make a DIV fill an entire table cell, but none of them seem to address specifically targeting the full height of the table heading cell for sort click functionality... Please assist me. :(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c69726f726c713d302c343d6f">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4c41415a5d5a5c4f5e035a4f4c424b6e1f001f16001d">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1e0518051b064a475b434a18">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32505d5d4641464053421f4653505e5772031c030a1c01">[email protected]</a>/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>