Problem table HTML/CSS - Odoo 14 qweb report

I'm having problems with nested table. This is the only solution that i found to have this configuration. But there are some little problems.

This is the code:

<table style="table-layout: fixed; margin: 0; padding: 0;width: 100%;height: 600px; border: 1px solid black;" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <td colspan="3" style="text-align: center;vertical-align: middle; border: 1px solid black;height: 100px;"><h1>SAFETY TOOL BOX</h1></td>
                            </tr>
                            <tr >
                                <td style="text-align: center;vertical-align: middle; border: 1px solid black;height: 80px;">Data: <br/><span t-field="doc.date"/></td>
                                <td style="text-align: center;vertical-align: middle; border: 1px solid black;height: 80px;">Luogo: <br/><span t-field="doc.development_site_id.name"/> - <span t-field="doc.address"/></td>
                                <td style="text-align: center;vertical-align: middle; border: 1px solid black;height: 80px;">HSE: <br/><span t-field="doc.hse_id.name"/></td>
                            </tr>
                            <tr>
                                <td colspan="3" style="border: 1px solid black;height: 50px;">Argomenti trattati: <span t-field="doc.res_topic_id.name"/></td>
                            </tr>
                            <tr>
                                <td style="border: 1px solid black;height: 50px;" ><span class="p-2">Partecipanti</span></td>
                                <td style="border: 1px solid black;height: 50px;">Firma</td>
                                <td style="border: 1px solid black;height: 50px;">Contenuti</td>
                            </tr>
                            <tr >
                                <td colspan="2" style="border: 1px solid black;">
                                    <table style="border: none; width: 100%;height: 100%;" cellspacing="0" cellpadding="0">
                                        <tr t-foreach="doc.partecipants_ids" t-as="partecipant">
                                            <td style="border-right: 1px solid black;border-bottom: 1px solid black;height: 50px;" width="50%">
                                                <span class="p-2" t-esc="partecipant['partecipant_id']['name']"/>
                                            </td>
                                            <td style="border-left: 1px solid black;border-bottom: 1px solid black;height: 50px;" width="50%">

                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td>
                                    <span t-field="doc.note"/>
                                </td>
                            </tr>
                        </tbody>
                    </table>

How can i solve or do you have a solution to reproduce this table? Thank you.

In 2023, tables are part of the past. You can use table-divs, flex tables or the latest technology: css grids

I created this table just for you, and if you want to understand how they work, how to edit these tables, and even create more tables, just go to this side: Angrytools css grids generator

CSS grids are very very easy to understand, and they are responsive, you can use them on mobile devices and desktop computer, tablets etc.

Here is your code

First the CSS code, you must put it in your css file or copy paste inside your and tag in your page

<style>
.angry-grid {
   display: grid; 

   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr;
   
   grid-template-areas: 
    'safety-tool-box safety-tool-box safety-tool-box'
    'data luogo hs3'
    'argomenti argomenti argomenti'
    'participanti firma argomenti';
   
   gap: 0px;
   height: 100%;
   
}
  
#item-0 {

   background-color: #cf97e7; 
   grid-area: safety-tool-box;
   
}
#item-1 {

   background-color: #c7d76d; 
   grid-area: data;
   
}
#item-2 {

   background-color: #c68dd9; 
   grid-area: luogo;
   
}
#item-3 {

   background-color: #57dcfb; 
   grid-area: hs3;
   
}
#item-4 {

   background-color: #8db75b; 
   grid-area: argomenti;
   
}
#item-5 {

   background-color: #adfdcd; 
   grid-area: participanti;
   
}
#item-6 {

   background-color: #e695da; 
   grid-area: firma;
   
}
#item-7 {

   background-color: #b5c9b7; 
   grid-area: argomenti;
   
}
</style>

And now the HTML code, put it after body tag or any place you prefer but in between <body> and </body> :

<div class="angry-grid">
  <div id="item-0">&nbsp;</div>
  <div id="item-1">&nbsp;</div>
  <div id="item-2">&nbsp;</div>
  <div id="item-3">&nbsp;</div>
  <div id="item-4">&nbsp;</div>
  <div id="item-5">&nbsp;</div>
  <div id="item-6">&nbsp;</div>
  <div id="item-7">&nbsp;</div>
</div>

You can obviously change the div ID-names, you can change everything but try to leave this alone:

grid-template-rows: 1fr 1fr 1fr 1fr;
       grid-template-columns: 1fr 1fr 1fr;

This help you set a size to columns and rows. You can change them if you want to height:auto but the widths are perfect to what you need

Hope it helps you