How to increase the width of tables to fit the popup if they are side bye side?-CodePudding

I am trying to increase the size of my side-to-side tables to fit the whole page but it does not work I added the style="width: 50%" to each table but it shows the first table in a row and the second table in other row and I want them to be horizontally sided and fitting the whole page

<table style="float: left">
   <thead>
       <tr>
            <th>A</th>
       </tr>
   </thead>
   <tbody>
       <tr>
            <td>100</td>
       </tr>
   </tbody>
</table>

<table style="float: left">
   <thead>
       <tr>
            <th>B</th>
       </tr>
   </thead>
   <tbody>
       <tr>
            <td>200</td>
       </tr>
   </tbody>
</table>

CodePudding user response：

You can achieve this by adding the display: flex; in the parent element.

<div style="display: flex;">
    <table style="width:100%;">
        <thead>
            <tr>
                <th>A</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>100</td>
            </tr>
        </tbody>
    </table>

    <table style="width:100%;">
        <thead>
            <tr>
                <th>B</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>200</td>
            </tr>
        </tbody>
    </table>
</div>

CodePudding user response：

To put both tables in the cells of the other table. Or
To combinate style width - maybe 45% 45 % etc. Or
Set table width in pixels but not in percents. In that way your site will not be adaptive for all devices and monitors.

CodePudding user response：

There are multiple ways to accomplish this. In my opinion, the best two ways are the following:

<div style="display: flex">
  <table style="flex-grow: 1">
    <thead>
      <tr>
        <th>A</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>100</td>
      </tr>
    </tbody>
  </table>

  <table style="flex-grow: 1">
    <thead>
      <tr>
        <th>B</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>200</td>
      </tr>
    </tbody>
  </table>
</div>

Or:

<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
  <table>
    <thead>
      <tr>
        <th>A</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>100</td>
      </tr>
    </tbody>
  </table>

  <table>
    <thead>
      <tr>
        <th>B</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>200</td>
      </tr>
    </tbody>
  </table>
</div>

With either of these examples, if you would like to add some spacing between these two tables, you can use the CSS gap property on the div like so: gap: 1 rem