Skip to Content
Menu
This question has been flagged
2 Replies
840 Views

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?

Avatar
Discard
Best Answer

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.

Avatar
Discard
Best Answer

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

Avatar
Discard
Related Posts Replies Views Activity
0
Jun 19
3314
0
Oct 21
1875
0
Jun 20
3192