I am trying to create a bootstrap table with different widths for the td elements. I have multiple columns and want a horizontal scroll bar, but when I use word-break on any td, the scroll bar stops working.
Here is an example of what I have tried:
CSS
<style>
.check {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
</style>
HTML
<div style=" overflow-x: auto; background: red">
<table class="check">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td style=" max-width:100px">
john
</td>
<td
style="
max-width: 10px;
word-reak: breakAall
"
>
Smith
</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td style="max-width:200px;word-break:break-all">
12000050000600000070000080000</td>
<td style=" max-width:100px">50</td>
<td style=" max-width:100px">50</td>
<td style=" max-width:100px">50</td>
<td style=" max-width:100px">50</td>
</tr>
</tbody>
</table>
</div>