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

What is the reason behind getElementsByClassName not functioning while getElementById is working perfectly?

The initial code snippet is not functioning correctly DN.onkeyup = DN.onkeypress = function(){ var div = document.getElementById("DN").value document.document.getElementsByClassName("options-parameters-input").style.fontSize = div; } #one{ heigh ...

javascriptjqueryhtmlcss

What steps should I take to transition from a table-based layout to a more semantic HTML structure with a CSS-based layout?

Looking at the image presented, a significant portion of the HTML code has been structured semantically, with CSS being utilized for overall aesthetics. However, despite concerted efforts, resorting to a table was necessary to ensure that the segment on th ...

csssemantic-markup

Striving to implement a dynamic expand and collapse animation feature for a card in ReactJS

I'm attempting to create an expand and collapse animation effect on a card without relying on bootstrap or any external libraries. I have tried adding a transition property but it doesn't seem to work when the button is clicked. Here is the comp ...

cssreactjs

How can I omit spaces in the HTML output when saving a data frame using to_html?

After using the to_html method, I noticed that there are \n after > and spaces before <. Is there a way to prevent them from being saved? Here is an example of what I have: <table border="1" class="dataframe"> <t ...

pythonhtmlpandasdataframe

Creating a single-level menu with Bootstrap using nested angular ng-repeat

I am currently working on developing a single level menu using bootstrap and angularJS. The menu is successfully functioning with JavaScript and HTML when the <li> element is dynamically created. Now, I am attempting to integrate AngularJS into the ...

htmltwitter-bootstrapangularjs

Bootstrap 5 - Create a full-screen modal perfectly aligned with its parent element

BootStrap 5 Incorporating the following layout: <div class="row flex-nowrap"> <div class="left"> <!-- leftbar --> </div> <div class="main overflow-auto position-relative"> <!-- ...

htmlcsstwitter-bootstrap

Stuffing a container with an image without considering the proportions

I am experimenting with filling a parent <div> with an image without concern for proportions. Despite knowing that it may not look great at all sizes, I just want to test its feasibility. Currently, the image is scaling instead of stretching to fit m ...

javascriptjqueryhtmlcssimage

The anchor tag dwarfs the element it contains

I'm experiencing an issue on my website where the clickable area of my two images/buttons, labeled Get Started and Learn More, is larger than the actual image itself. I've wrapped the images with anchor tags to link to separate pages, but for som ...

htmlcss

Using the jqueryRotate plugin to rotate an image by 90 degrees

Is there a way to rotate images on a webpage using the JQueryRotate script? I have 10 images that I want to be able to rotate when clicked, but I'm not sure how to implement it. Any assistance would be welcomed. This is the HTML code for the images: ...

javascriptjqueryhtmlrotation

"Discover the step-by-step process of transforming an input field value into a checkbox with

I've been experimenting with creating a To-Do list using HTML, CSS, and Javascript. I've managed to capture the input field value in a fieldset so far. However, my goal is to find a way to transform the input field value from the textfield into a ...

javascripthtmljquerycheckboxinput-field

Ways to style a div element in CSS to achieve a unique shape

Hello there! I'm looking to achieve a tilted background div effect. Anyone have any tips or ideas on how I can do this? I'm new to web development and would appreciate the guidance. https://i.stack.imgur.com/wyj1X.png ...

javascripthtmlcssreactjs

Adjusting Text Color on Buttons

I am looking for a simple button with clear color and black text, but the default button has white text. I need a way to change the text color. Check out my current app <View style={styles.fastlog}> <Button style={styles.bouton} title= "Con ...

cssreactjsreact-native

What are the best methods for placing content within a box and ensuring it is responsive?

Having trouble solving a simple problem that seems to have an easy solution. The code I'm working on is meant to display multiple bubbles with similar content, but the text gets distorted due to using strange margin values to fit a specific resolution ...

htmlcss

Challenges with displaying HTML website on mobile platform

Hey there! I admit that my website may not be the greatest, but bear in mind that this is just a school project page. My current issue is with the mobile view styling - the hamburger menu should replace the nav bar on smaller screens, but it's not wor ...

htmlcss

Converting a table into div elements and subsequently reverting it back to its original table format

[STOP DOWNVOTING: NEW AND IMPROVED] Discovering a simple technique on stackoverflow to transform tables into divs has been quite enlightening. By assigning classes to each tag, such as: <table class="table"> the process of converting from table to ...

javascripthtmlcss

Is it possible to have a hidden div box within a WordPress post that is only visible to the author of the

How can I create a div box with "id=secret" inside a post that is only visible to the author of the post? I initially made it for the admin, but now I want the id to be visible exclusively to the post's author. For instance: If the author is curren ...

javascripthtmlcsswordpressprivacy

Creating an Android application that integrates HTML styling efficiently

I currently have a social networking site with a mobile web version, and my goal is to package that view into an Android app and potentially enhance it with a custom splash screen. Essentially creating a branded browser window. If you have any tips or adv ...

jqueryandroidhtmlcssweb

How can I utilize a PHP variable as the height and width parameters in a CSS style?

After spending a considerable amount of time on this project, I am still struggling to make it work. Can someone please guide me on how to correctly assign the width and height values to the img element using variables? for ($x = 1; $x <= $aantal; $x+ ...

phpcss

What is the best way to merge multiple attributes into a single attribute in HTML?

Is there a way to set a margin for a section of my site without it treating each attribute individually? I want to treat them as one attribute instead. Here's an example: <div style="background-color: grey; padding: 13px;"> <h1>This p ...

htmlcss

What is the best way to add animation to my `<div>` elements when my website is first loaded?

I am looking for a way to enhance the appearance of my <div> contents when my website loads. They should gradually appear one after the other as the website loads. Additionally, the background image should load slowly due to being filtered by the wea ...

javascriptjqueryhtmlcss