How to make responsive table in odoo and how to size table for example, first column small and second column 3 times wider than first coulumn . how to do it?
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
- CRM
- e-Commerce
- Accounting
- Inventory
- PoS
- Project
- MRP
This question has been flagged
Odoo uses Bootstrap guidelines to create responsive HTML (from XML templates).
Please be aware that depending on your Odoo installation, some more recent Bootstrap features might not be available, since older Odoo versions use older Bootstrap versions too.
However, most of the default Bootstrap functionality hasn't changed too much, and it's retro-compatible with older versions.
Check Bootstrap Tables or Bootstrap Grid from the official Bootstrap docs and try it.
You can select the Bootstrap doc version in the top right corner of the page.
Bootstrap divides the available space by 12.
When you see "col-2" you assign 2 spaces to that column, when is "col-6" is half the size of the grid (or half the available space), you can know more about this in the Bootstrap Grid link.
Hi,
To make a table responsive with custom column widths, you can use one of the following methods:
1) Bootstrap class: Wrap the table in the table-responsive class for responsive scrolling.
<div class="table-responsive">
<table class="table">
<th class="w-25">Column1</th>
<th class="w-75">Column2</th>
</table>
</div>
2) Colgroup Method: Use percentage-based widths within a <colgroup> for flexibility.
<table class="table">
<colgroup>
<col style="width: 25%"/>
<col style="width: 75%"/>
</colgroup>
<tr>
<th>column1</th>
<th>column2</th>
</tr>
</table>
3) Fixed Width Method: Set minimum widths directly on the <th> elements to prevent content from being compressed.
<table class="table">
<tr>
<th style="min-width: 150px">Column1</th>
<th style="min-width: 450px">Column2</th>
</tr>
</table>
Hope it helps
Enjoying the discussion? Don't just read, join in!
Create an account today to enjoy exclusive features and engage with our awesome community!
Sign upRelated Posts | Replies | Views | Activity | |
---|---|---|---|---|
|
0
Jun 19
|
3314 | ||
|
0
Oct 21
|
1875 | ||
|
0
Jun 20
|
3192 |