Menu
I have a boostrap container div and inside it, I have a table:
<table id="reviewer_table" class="table table-hover table-striped table-condensed tasks-table">
<thead>
// tr/td ...
</tbody>
</table>
But for some reason, this table is too wide, that one column is actually outside of the right screen.
I am not sure what is causing the issue, so I am sharing the code to know if I am doing something wrong.
997
Add . w-auto class to the table element to set an auto width to the table column. The width of the columns will automatically adjust to the content of the column. That means it will always take a minimum width required to present its content.
To prevent cells (rows) from expanding vertically, you have to set a fixed height for table rows. Select the relevant rows and, on the Table Tools Layout tab, click Properties. On the Row tab, select "Specify height" and then choose "Exactly" for "Row height is." Specify the desired amount.
Bootstrap provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows stripped, adding or removing borders, making rows hoverable, etc.
Please add following div before your table
<div class="table-responsive">
Your table
</div>
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
