How to perfectly position multiple tables using CSS

I am relatively new to the world of HTML and CSS. I have successfully created several tables, but now I am struggling to display them all on a single line within a designated box. Despite my best efforts, I have not been able to achieve the desired result. Can anyone provide assistance with this issue?

#content2{
   margin: 30px 0;
   background: white;
   padding: 20px;
   clear: both;
   box-shadow: 0px 1px 1px #999;
   text-align: center;
   overflow:hidden;

}

table{
  margin-right: auto;
  margin-left: auto;
  float:left;
}
td,th{
  padding: 20px;
}

As far as I can tell, there are no errors in my HTML code.

htmlcsscss-tables

Answer №1

To achieve a different layout for tables, consider using display: inline-block instead of float: left.

Check out this example

Keep in mind that using display: inline-block may affect the default full width behavior of table elements.

Answer №2

There are a few different options available.

1. To achieve a purely CSS solution that is "dynamic" (meaning the width is unknown beforehand), you can set the table to display: inline-block and remove the float. This method works well in Chrome, but may encounter issues in older versions of IE.

http://jsfiddle.net/ZfX2M/

2. If the width is known, you can create an inner content div with that width and center it using margin:auto.

http://jsfiddle.net/AuF7z/1/

3. If the width is unknown but you are open to using JavaScript, you can follow the same steps as above but calculate the width in JS. (I personally use jQuery for this purpose, but raw JS can also be used)

http://jsfiddle.net/mVADm/1/

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

Using JavaScript (without jQuery), take away the CSS class from an element

Seeking assistance from experts on the process of removing a class from an element solely using JavaScript. Kindly refrain from suggesting solutions involving jQuery as I am unable to utilize it, and have little knowledge about its functionalities. ...

javascripthtmlcss

Disabling the @import cache feature in LessCSS Assetic

I'm facing a minor issue that is robbing me of precious time. Currently, I am using the assetic plugin with the lesscss filter in my symfony2.1 project. The problem lies in Assetic not detecting changes in imported files when using the @import functi ...

phpcsssymfonylessassetic

Having trouble getting my JavaScript code to function properly on Firefox browser

I have created a script where the cursor automatically moves to the next form field once it reaches its maximum length, in this case 1. Here is the JavaScript code: window.onload=function(){ var container = document.getElementsByClassName("container")[0] ...

javascripthtmlgoogle-chromefirefoxcross-browser

Learn how you can efficiently send a JSON response to an AJAX call by utilizing a serialized object along with HTML generated from the Html

Using C# and MVC, I am working on responding to an ajax call triggered by Jquery. My goal is to send back an object that includes a List<int> as well as some HTML code generated using a HtmlHelperExtension that I developed. Previously, I was only se ...

c#htmlajaxjsonhtml-helper

Vuetify - Best practices for vertically aligning rows in a v-treeview component

Just getting started with Vue js, so pardon me if this is a silly question. I've scoured the internet and can't seem to find a solution. I'm working on a v-treeview displaying a folder structure, with descriptions of each folder in a separa ...

javascriptcssvue.jsvuetify.js

Implement a loading spinner to display each time a computed method is invoked in a Vue.js

Whenever a checkbox is checked, my filtering method gets triggered. I am trying to implement a loader that displays while the filter process is ongoing and then shows the results. However, I have encountered an issue where the loader remains visible at all ...

javascripthtmlvue.js

Using ReactJS to toggle a div upon clicking

I am facing an issue with toggling a div by clicking on text within a toggle bar. I am in the process of recreating a WordPress website template in React JS that was originally built using bootstrap. You can view the original template here. So far, I have ...

htmlcssreactjs

left-floating div

I am currently working on designing a page that requires multiple columns to be displayed. The columns should float left and never appear stacked on top of each other. Ideally, I would like the columns to extend beyond the screen without a scrollbar, makin ...

htmlcss

Removing an MySQL database using a PHP HTML button

While attempting to remove a row from my MySQL PHPMyAdmin database using a button in AssetApprovalForm.php, I encountered an issue. Upon clicking the decline button in AssetApprovalForm.php, nothing happens. Click here for the image of AssetApprovalForm.p ...

phphtmlmysql

Aligning text appears fine in a full screen browser, but it can cause inconsistencies in appearance when resizing the window or viewing on a phone, as demonstrated in the

Hi there, I'm new to web design and I'm struggling to make my site look good on all screen sizes. I've created a page that should work well on any screen size: https://jsfiddle.net/garixakor/j0xck25v/1/ I attempted to center one of the par ...

htmlcssmedia-queriesmargincentering

Toggle JavaScript Query Display

Welcome to my HTML test website where I am testing show/hide JavaScript functionality. Upon loading the page, you may notice that everything is hidden until a button is clicked. <html> <head><title>Test</title> <scr ...

javascripthtmlcss

What could be the reason that my submenus are not appearing as expected?

I'm currently working on refining the navigation bar design for a website, but I've encountered a problem with the submenu functionality. It appears that only one submenu is visible while the others remain hidden. For example, when navigating to ...

htmlcsssubmenu

How can you add padding to an HTML page using CSS?

I've been attempting to use padding-bottom:90px; in order to shift Tweets by ‎@StackOverflow (the entire tweets section) downwards on the page. I want to move it further down using the above padding, but it doesn't seem to be working for me. H ...

htmlcssasp.net

The PHP header() function is not properly redirecting the page, instead it is only displaying the HTML

After double checking that no client sided data was being sent beforehand and enabling error reporting, I am still encountering issues. The issue revolves around a basic login script with redirection upon validation. <?php include_once "database- ...

javascriptphpjqueryhtmlajax

What could be the reason my SVG images are not displaying?

My website contains SVGs that are not loading consistently. I acquired some from freeicons/icon8 and created a couple using Inkscape. Initially, I inserted them using HTML but switched to CSS after doing research online on how to ensure they load properly ...

htmlcsssvg

Incorporate dynamic HTML into Angular by adding CSS styling

Just starting out with Angular and have limited front-end experience. I'm feeling a bit lost on how to proceed. Currently, I have a mat-table with a static datasource (will connect to a database in the future), and I need to dynamically change the bac ...

htmlcssangular

splitting up the lengthy list into manageable chunks according to the screen dimensions

How can I make the blue color row-based list (the divs inside a div with id phrase) break on the next line based on the screen size? Any suggestions on additional changes needed in the following CSS? #phrase { color: #fff; position: ...

htmlcss

Utilizing React JS to Activate the Glyphicon Calendar Icon on Click

Could someone please advise on how to make the calendar glyphicon activate the datetime picker upon clicking? I have a button currently but it is not functional. I've been searching for React-specific solutions without success. <div className={cla ...

javascripthtmlreactjs

How can I store a value or text to track view counts or a counter efficiently?

Recently, I've been trying to implement a view counter on my website, similar to what you see on YouTube. Currently, the number of views stands at 23. I managed to find some code that allows me to increment the view count every time I click on an imag ...

javascriptphphtml

access various paths to distinct iframes

<?php // Specify the directory path, can be either absolute or relative $dirPath = "C:/xampp/htdocs/statistics/pdf/"; // Open the specified directory and check if it's opened successfully if ($handle = opendir($dirPath)) { // Keep readin ...

javascriptphphtmlcssiframe