如何让整个蓝色矩形都可以点击排序？我的意思是，如果文本很短，我只能在文本周围单击，而不能在蓝色区域内的任何地方单击。 “Bla-bla-bla”的整个蓝色区域很可能是可点击的，因为文本已经很长了。
你可以在这里看到这个问题：https://streamable.com/h2jugw
我该如何解决这个问题？有任何想法吗？ 🤔
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<style>
.bgcolor {
background-color: #06AEF8;
}
.bootstrap-table .fixed-table-container .table {
table-layout: fixed;
width: 100%;
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;
height: auto;
}
.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>