HTML,CSS — How to horizontally center two tables side by side
You can use flexbox on the container div, apply justify-content: center; to center them, remove the floats and use a margin on one of the tables to create a distance between them.
.wrap { display: flex; align-items: center; justify-content: center;}
table { border: 1px solid #555;}<div class="wrap"> <table style="margin-right:10%;"> <tr> <td>abc</td> </tr> </table> <table> <tr> <td>xyz</td> </tr> <tr> <td>xyz</td> </tr> <tr> <td>xyz</td> </tr> </table> </div>HTML — Two Tables Horizontally Side by Side
I think you're missing a few lines of HTML from the start of your copy and paste, however what you'll want to do is add a float:left to the CSS of the first fieldset.
How can I float two tables next to each other left to right and center them both?
You may want to use inline-block instead of float:
table.table_on_the_left, table.table_on_the_right {
display:inline-block;
}
And to make the horizontal align text-align:center on the parent:
body {
text-align:center;
}
Check this Demo
Here you can know more about inline-block
Aside a recommendation plus if you are trying to set the layout for your page avoid to use <table> save it only for tabular data and instead use <div> and positioning.
Using CSS, trying to center and align multiple tables side by side
The floating divs for the center table are missing, shouldn't it be:
<div class='cell-left'><table class='cell'><tr><td>
CENTER1
</td></tr></table></div>
<table class='cell'><tr><td>
CENTER2
</td></tr></table>
<div class='cell-right'><table class='cell'><tr><td>
CENTER3
</td></tr></table></div>
But regardless of that, why not use one table for each level of structure instead of tables for each element.
See DEMO 1 for stacked tables.
See DEMO 2 for nested tables.
See DEMO 3 for nested tables with highlight features (try hover!).
See DEMO 4 for equal heights of all cells.
See DEMO 5 for adjusted widths of far left and far right cell and center cells spanning everything in between.
See DEMO 6 for adjusted widths of far left and far right cell and center cells are as small as possible.
Aligning Multiple Tables Horizontally using CSS or HTML for IE lower versions(6,7,8)
inline-block is NOT a suitable display property for a table.
Use inline-table instead... for modern browsers.
For support with older ones, however, you may need to use float:left, or even nested tables (ewwww, I feel dirty for even suggesting that...) to make it work as far back as IE6.
Same TD height for two tables displayed side by side
Here's a version of the top three sections of your code with a table wrapped around the inner tables for structure. Setting vertical-align: top on the td's of the container table keeps the inner tables at the same vertical position even when one is taller than the next.
.even-heights { font-size: 0; background: black; border: 7.5px solid; border-collapse: collapse;}
.even-heights td { vertical-align: top;}
.customers { margin: 7.5px; font-size: 16px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: uncollapse; display: inline-block;}
.customers th { border: none;}
.customers td { border: none; /* tr must have a height then... min-height: 33%; */ min-height: 18px; min-width: 62px;}
.customers tr:nth-child(even) { background-color: #f2f2f2;}
.customers tr:nth-child(odd) { background-color: #fff;}
.customers th { padding-top: 8px; padding-bottom: 8px; text-align: Center; background-color: Gray; color: white;}<table class="even-heights"> <tr> <td> <table class="customers"> <tr> <th>Heading 1</th> <th></th> </tr> <tr> <td>Question 1?</td> <td align="center" font='red'>Yes</td> </tr> <tr> <td>Question2?</td> <td align="center">N/A</td> </tr> <tr> <td>Question3</td> <td> </td> </tr> </table> </td> <td> <table class="customers"> <tr> <th>Header 1</th> <th></th> </tr> <tr> <td>Question1</td> <td> </td>
</tr> <tr> <td>Question</td> <td> </td>
</tr> <tr> <td>Question</td> <td> </td> </tr> <tr> <td>Question</td> <td> </td> </tr> </table> </td> </tr> <tr> <td>
<table class="customers"> <tr> <th>Heading 2</th> <th></th>
</tr>
<tr> <td>Question 1?</td> <td align="center">USD</td>
</tr> <tr>
<td>Question 2?</td> <td align="center">USD</td> </tr>
<tr> <td>Question 3?</td> <td align="center">USD</td>
</tr> <tr> <td>Question 3?</td> <td align="center">N/A</td>
</tr> </table> </td> <td> <table class="customers"> <tr> <th>header 2</th> <th></th> </tr> <tr> <td>Question</td> <td></td> </tr> <tr> <td>Question</td> <td align="center">Yes</td> </tr> <tr> <td>Question?</td> <td align="center">N/A</td>
</tr> </table> </td> </tr> <tr> <td>
<table class="customers"> <tr> <th>Heading 3</th> <th></th> </tr> <tr> <td>Question 1</td> <td align="center">Yes</td> </tr> <tr> <td>Question 2 </td> <td>See Link </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td>Direct Debit</td> <td></td> </tr> </table> </td> <td> <table class="customers"> <tr> <th>HEader 3</th> <th></th> </tr> <tr> <td>Question</td> <td> </td> </tr> <tr> <td>Question </td> <td align="center">See Link </td> </tr> <tr> <td>Question </td> <td> </td> </tr> </table> </td> </tr></table>Related Topics
Make Content Horizontally Scroll Inside a Div
How to Force Position Absolute With 100% Width to Fit into Parent Div With Padding
Item Moving Around When Window Resized
First Name Validation Using HTML 5 Pattern
How to Automatically Set Text Box to Uppercase
Why Don't Flex Items Shrink Past Content Size
Css When Inline-Block Elements Line-Break, Parent Wrapper Does Not Fit New Width
What Are the Recommendations For HTML ≪Base≫ Tag
Left Column and Stacked Right Column Using Flexbox Css
Disabled Form Inputs Do Not Appear in the Request
How to Properly Escape Quotes Inside HTML Attributes
Angular 4 Img Src Is Not Found
Multiple Select Dropdown Not Working With Ng-Option
Wrapping Text Inside Input Type="Text" Element Html/Css
What Are Valid Values For the Id Attribute in Html
Why Doesn't Height: 100% Work to Expand Divs to the Screen Height