How to add TABLE style in QWEB reports? Odoo 14

Question

I want to add a border to the table ,

<table style="border: 1pt solid black;display: inline-block;">
     <tbody style="">

          <tr>
              <th" >Title1</th>
              <th" >Title2</th>

          </tr>
          <tr>
              <td  t-esc=""/>
              <td t-esc=""/>
          </tr>
      </tbody>
</table>

But when I tried to add this style :

<style>
   td, th{border:solid 1px;text-align:center;}
</style>

I got this result : But I want to get this style of table :

Any help please? Thanks.

I tried with these 2 solutions , but I got these results:

<table  class="table">
     <tbody style="">
          <tr>
             <th  >Title1</th>
              <th >Title2</th>
            </tr>
            <tr>
               <td > Field1 </td>
                <td > Field2 </td>
            </tr>
     </tbody>
 </table>





 <table  style=" border-collapse: collapse;">
    <tbody >
         <tr>
              <th   style=" border-collapse: collapse;"  >Title1</th>
              <th  style=" border-collapse: collapse;" >Title2</th>
         </tr>
         <tr>
               <td  style=" border-collapse: collapse;" > Field1 </td>
               <td  style=" border-collapse: collapse;" > Field2 </td>
          </tr>
     </tbody>

Answer 1

you need to use an additional css property as following:

table, td, th{
  border-collapse: collapse;
}

by the way in Odoo, bootstrap is already included so you could just do the following:

<table class="table">
<table>

so your final code would be

<!-- using bootstrap -->

<table  class="table table-bordered ">
  <tbody>
    <tr>
      <th>Title1</th>
      <th>Title2</th>
    </tr>
    <tr>
      <td> Field1 </td>
      <td> Field2 </td>
    </tr>
  </tbody>
</table>

<!-- hard-coded style -->

<table  style="border:solid 1px; border-collapse: collapse;">
  <tbody>
    <tr>
      <th style="border:solid 1px; border-collapse: collapse;">Title1</th>
      <th style="border:solid 1px; border-collapse: collapse;">Title2</th>
    </tr>
    <tr>
      <td style="border:solid 1px; border-collapse: collapse;"> Field1</td>
      <td style="border:solid 1px; border-collapse: collapse;"> Field2</td>
    </tr>
  </tbody>
</table>