Issue
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>
Solution
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>
Answered By - Shoaib Hussain
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.