Menu
I need to increase column width, i tried width-%,PX,rem but that's not working. I can able to increase the column width if the table have small number of columns but in my scenario if i have more than 15 columns i cant change the width.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th><th scope="col">#</th>
<th scope="col" style="width: 500px;">Heading heading'</th><th scope="col">Heading</th>
<th scope="col">Heading</th><th scope="col">Heading</th>
<th scope="col">Heading</th><th scope="col">Heading</th>
<th scope="col">Heading</th><th scope="col">Heading</th>
<th scope="col">Heading</th><th scope="col">Heading</th>
<th scope="col">Heading</th><th scope="col">Heading</th>
<th scope="col">Heading</th><th scope="col">Heading</th>
<th scope="col">Heading</th><th scope="col">Heading</th>
<th scope="col">Heading</th><th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th><th scope="row">1</th>
<td style="width: 300px;">jksdfn jhs fjidsh fj id hidsfdsfd</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
</tr>
<tr>
<th scope="row">1</th><th scope="row">1</th>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
<td>Cell</td><td>Cell</td>
</tr>
</tbody>
</table>
I need to increase the third column in the table below, attached image for referene.
I've used Always Responsive Bootstrap 4 Table
341
You can simply add the w-auto class into the table element to place an auto width to that table column. The width of those columns will automatically adapt to the content of that column. Which implies that it will perpetually take up the minimum width needed to display its content.
To change the width to a specific measurement, click a cell in the column that you want to resize. On the Layout tab, in the Cell Size group, click in the Table Column Width box, and then specify the options you want.
On the table you now need to enable flex box by adding the class d-flex , and drop the xs to allow bootstrap to automatically detect the viewport. Table column width use the same layout as grids do; using col-[viewport]-[size] . Remember the column sizes should total 12; 1 + 3 + 3 + 5 = 12 in this example.
To change the width of columns to fit the contents, select the column or columns that you want to change, and then double-click the boundary to the right of a selected column heading. To change the width of all columns on the worksheet, click the Select All button, and then drag the boundary of any column heading.
You need to use min-width instead of width.
Click the "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-responsive">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">#</th>
<th scope="col" style="width: 500px;">Heading heading'</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<th scope="row">1</th>
<td style="min-width: 300px;">jksdfn jhs fjidsh fj id hidsfdsfd</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">1</th>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
