Align two tables horizontally in the center using HTML

Is there a way to center two tables side by side using CSS?

I have been able to center a single table, but I am struggling to center two tables together. Can anyone provide a simple solution using CSS?

Below are the codes I have used:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
 body {
  background-color: #FFFFFF;
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}
/*** Table Styles **/

.table-fill {
  background: white;
  border-radius: 3px;
  border-collapse: collapse;
  height: 120px;
  max-width: 400px;
  padding: 5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
<table class="table-fill" style="" border="1">
  <thead>
    <tr>
      <th class="text-left">1</th>
      <th class="text-left">2</th>
      <th class="text-left">3</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-right">Val1</td>
      <td class="text-center">a</td>
      <td class="text-left">%</td>
    </tr>
  </tbody>
</table>

<table class="table-fill" style="" border="1">
  <thead>
    <tr>
      <th class="text-left">1</th>
      <th class="text-left">2</th>
      <th class="text-left">3</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-center">AÇILAN SANDIK</td>
      <td class="text-left">1</td>
      <td class="text-left">1</td>
    </tr>
    <tr>
      <td class="text-center">KALAN SANDIK</td>
      <td class="text-left">1</td>
      <td class="text-left">1</td>
    </tr>
  </tbody>
</table>

htmlcsshtml-table

Answer №1

One solution to your issue could be to add the 'display:inline-table;' CSS property to your .table-fill class.

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
 body {
  background-color: #FFFFFF;
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}
/*** Table Styles **/ 

.table-fill { 
  background: white; 
  border-radius: 3px; 
  border-collapse: collapse; 
  height: 120px; 
  max-width: 400px; 
  padding: 5px; 
  width: 100%; 
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 
  animation: float 5s infinite; 
  display:inline-table; 
}
<table class="table-fill" style="" border="1">
  <thead>
    <tr>
      <th class="text-left">1</th>
      <th class="text-left">2</th>
      <th class="text-left">3</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-right">Val1</td>
      <td class="text-center">a</td>
      <td class="text-left">%</td>
    </tr>
  </tbody>
</table>

<table class="table-fill" style="" border="1">
  <thead>
    <tr>
      <th class="text-left">1</th>
      <th class="text-left">2</th>
      <th class="text-left">3</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-center">AÇILAN SANDIK</td>
      <td class="text-left">1</td>
      <td class="text-left">1</td>
    </tr>
    <tr>
      <td class="text-center">KALAN SANDIK</td>
      <td class="text-left">1</td>
      <td class="text-left">1</td>
    </tr>
  </tbody>
</table>

Answer №2

Modified the CSS by adding text-align:center; to the body or a parent of the tables and display:inline-table; to the .table-fill. Please check it on full page view for the changes.

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
 body {
  background-color: #FFFFFF;
  font-family: "Roboto", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  text-align:center;
}
/*** Table Styles **/

.table-fill {
  background: white;
  border-radius: 3px;
  border-collapse: collapse;
  height: 120px;
  max-width: 400px;
  padding: 5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
  display: inline-table;
}
<table class="table-fill" style="" border="1">
  <thead>
    <tr>
      <th class="text-left">1</th>
      <th class="text-left">2</th>
      <th class="text-left">3</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-right">Val1</td>
      <td class="text-center">a</td>
      <td class="text-left">%</td>
    </tr>
  </tbody>
</table>

<table class="table-fill" style="" border="1">
  <thead>
    <tr>
      <th class="text-left">1</th>
      <th class="text-left">2</th>
      <th class="text-left">3</th>
    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-center">AÇILAN SANDIK</td>
      <td class="text-left">1</td>
      <td class="text-left">1</td>
    </tr>
    <tr>
      <td class="text-center">KALAN SANDIK</td>
      <td class="text-left">1</td>
      <td class="text-left">1</td>
    </tr>
  </tbody>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you customize gutter widths for specific rows in Bootstrap 3?

Currently, I am constructing my own website using Bootstrap 3 and have come across a challenge that I would like to address: My goal is to assign distinctive gutter widths to certain rows in my design. The remaining sections of the site will adhere to th ...

htmlcsstwitter-bootstraprowtwitter-bootstrap-3

Learn the process of eliminating special characters from input or textarea fields with AngularJs!

My attempts to integrate an AngularJS directive to remove special characters from input and textarea fields have been unsuccessful. Despite no errors being reported in the console, I am facing issues with the character count tooltip not displaying numbers ...

javascripthtmlangularjs

Issue with resizing a Bootstrap pill containing truncated text

After struggling with this issue for some time, I attempted to use javascript to solve it but have been unsuccessful. The challenge involves a tag list in a table that displays a link when hovered over. Following advice from another member on SO, I managed ...

htmlcssbootstrap-5

Is it possible for an SVG to derive its dimensions from the containing element?

I am currently in the process of transitioning a Vue/Vuetify application from using web fonts for Material Design Icons to utilizing SVG icons instead. With the web font, an example of a heading that includes an icon looks like this: <template> &l ...

csssvgvuetify.js

Inject CSS values dynamically

I am currently working on dynamically setting the color of a div. To provide some context, let's examine the following: <!doctype html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div clas ...

jqueryhtmlcssdynamicless

How come padding-bottom isn't effective in increasing the position of an element?

My goal is to adjust the position of the orange plus sign (located in the lower right corner of the screen) so that it aligns better with the other icons, directly below them. I've tried using padding-bottom, but it doesn't seem to work, while pa ...

htmlcssasp.net-mvcrazor

The contents table remains fixed in the top right corner as you scroll

I have developed an Angular app with a table-of-contents component that only displays two items. The code for the script is as follows: ts import { Component, OnInit } from '@angular/core'; import { pdfDefaultOptions } from 'ngx-extended-p ...

htmlcssangulartypescriptbootstrap-4

Trigger a jQuery function upon clicking a button

I am attempting to create a jQuery function that can be called independently, and then trigger the function when a click event occurs. Below is the code I have put together: HTML: <input type="text" class="form-control email_input" name='email&ap ...

javascriptjqueryhtml

Tips for customizing the appearance of path elements within an external SVG file being utilized as a background image

How can I change the color of the paths in an SVG background image assigned to a div using CSS? ...

htmlcsssvg

Ways to correct inverted text in live syntax highlighting using javascript

My coding script has a highlighting feature for keywords, but unfortunately, it is causing some unwanted effects like reversing and mixing up the text. I am seeking assistance to fix this issue, whether it be by un-reversing the text, moving the cursor to ...

javascripthtmlcsstextinnerhtml

Mastering the Art of Stacking with FontAwesome

I am working on stacking the Soundcloud icon manually to display it within a square similar to fa-facebook-square. However, my Soundcloud icon is appearing under the square. This is the code I have so far: <div class="row"> <ul style="list-s ...

htmltwitter-bootstrapcssfont-awesome

KnockoutJS's data binding feature is failing to display any content within the table rows

My JavaScript function creates a model and applies it to an HTML document using knockoutJS. In the HTML file, I have two different ways of displaying the same data: 1- A select list (which is working fine) 2- A table (not showing the same data) I need a ...

javascripthtmlknockout.jskendo-mvvm

Having trouble understanding why adding raw HTML is yielding different results compared to generating HTML using jQuery

I need assistance with two jsFiddles: http://jsfiddle.net/kRyhw/3/ http://jsfiddle.net/kBMSa/1/ In the first jsFiddle, there is code that adds HTML to my ul element, including an 'X' icon in SVG format. Attempting to recreate this functionali ...

javascriptjquerycss

Bizarre actions with jQuery append in Internet Explorer 8

Issue with adding elements to a div in IE8: The element is not added until the button is clicked twice, resulting in two new elements being added at once. Here's the code snippet in question: $(options.addButton).click(function(event) { var proto ...

javascriptjqueryhtmlcssinternet-explorer-8

Implement a jQuery feature to gradually increase opacity as the user scrolls and the page loads

On a dynamically loaded page via pjax (except in IE), there are several links at the bottom. Whenever one of these hyperlinks is clicked, the page scrolls to the top while still loading. Although I am okay with this behavior, I'm curious if it' ...

javascriptjqueryhtmlcsspjax

Blinking Effect of New Element in JQuery ListView

I'm attempting to implement AJAX functionality in a JQuery listview that will make flash yellow, but unfortunately I am having trouble getting it to work. Could someone provide me with some guidance? http://jsfiddle.net/zFybm/ ...

jquerycssjquery-uijquery-mobile

Creating two distinct SVG images without interfering with other div elements can be accomplished by properly structuring the HTML

I am working on a page layout that consists of three main sections. There is a top bar with buttons, a middle section that needs to load different pages using jQuery, and a bottom bar with additional buttons. On top of all this are floating windows that op ...

csshtmlsvgz-index

The mouseover and mouseleave functions remain active even during window resizing

I wish to create a dynamic menu that appears when hovering over a user, but only if the window size is above 977 pixels. Take a look at my code below: $(document).ready(function() { $(window).on("load resize", function(event){ var windowS ...

jqueryhtmlcssjsfiddle

error in jquery when splitting

I encountered an issue while trying to split data for checkboxes. var ukuran = data['model'].ukuran_model; var cek = ukuran.split(",").join('], [value='), $inputs = $('input[name^=ukuran]'); $inputs.filter('[value=&a ...

jqueryhtmljson

css issues with setting background colors

I am in the process of updating the header on a website, and I want the entire header to have a light gray background. My initial approach was to set the background-color of the main header div to gray (E7E7E7), but for some reason, there is now a white sp ...

htmlcss