How can I float two tables next to each other left to right and center them both?


Tags: html,css

Problem :

I have two tables, which I would like to position next to each other BUT want them to be on the center of the page.

I almost did it, I only have a problem how to align them on the center of the page. My example:

Demo

My HTML:

<table class="table_on_the_left">
    <tr><td>
        hello demo here 
        </td></tr></table>

<table class="table_on_the_right">
    <tr><td>
        hello demo here 2 
    </td></tr></table>

My CSS:

table.table_on_the_left {
    position:center;
    float:left;
   }

  table.table_on_the_right {
    position:center;
    float:right;
  }


Solution :

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.


    CSS Howto..

    How to create the masonry effects with just bootstrap 3 grid system and css

    jQuery + CSS: How to scroll smooth, regarding a fixed header?

    howto hide outline on a form

    How to display heading and paragraph elements inline in css?

    Modal box doesn't show completely

    How to get divs 100% of browser using css?

    How to style one react component inside another?

    How do I make the class 'path' show up at higher zoom levels using carto CSS in MapBox Studio?

    How can I replace text value to star

    How to add css in post? [closed]

    How can I make a fluid width, fluid height, fixed header table with jQuery?

    How to get inputs in the same line with css?

    How to apply Title Case in input box through css

    How to get next elements before a specific element using jquery or css

    How to conditionally load CSS

    how to make changes permanently to css elements with -moz-transform?

    How can I select an nth element without knowing the element in CSS?

    How to create a completely flexible piano keyboard with HTML and CSS

    How to add a second border around a CSS circle

    CSS - How to horizontally center table whos position is absolute

    Bootstrap 3 - How to change the hyperlink title text showing as tooltip using javascript/jquery?

    How to make html button look pressed in using css?

    How to create Chrome DevTool style bar charts with grids using plain CSS/HTML?

    How can I use Modernizr to get border-radius working in IE8?

    webkit just cuts off decimals in css number … how to workaround?

    How can I style html/form elements using CSS?

    How to float a word next to animated text

    CSS - How can I set the content to attr() but when attribute isn't available, set it to 0 or another?

    How can I target and except for the first and last ?

    how to make the entire form (input and submit button) change border color on focus (bootstrap 3)