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