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

specific css styles only for Safari and Internet Explorer

Imagine a scenario where I have a div with the class 'x': <div class = 'x' /> This div has some CSS properties and what's interesting is that it appears differently in Safari and the latest version of IE compared to other ...

javascriptjquerycss

Tips for dynamically adding and removing keys from a JSON object

I am working on a code for a car rental website using jQuery mobile. I need to dynamically add and remove keys from a JSON object with true or false values. The goal is to make a selected car unavailable by changing the "available" key to either true or ...

javascriptjqueryjsonhtmljsonp

"Creating Rounded Corners in HTML: A Step-by-Step Guide

Is there a way to round the corners of this image? Below is an excerpt from my body... <body> <h1 style="float:left; width:37%;"><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h1> <div style= ...

htmlcssimageborder

Tailored alignment of checkboxes and labels

I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...

csscheckbox

Update the content on the webpage to display the SQL data generated by selecting options from various dropdown

My database table is structured like this: Name │ Favorite Color │ Age │ Pet ────────┼────────────────┼───────┼─────── Rupert │ Green │ 21 │ ...

javascriptjqueryhtmlsqlajax

What is the best way to hide the select arrow in an input-group using Bootstrap 4?

Is there a way to get rid of the unsightly double arrow in the select element? I have tried various solutions I found online, but none seem to be effective. <div class="form-group"> <label for="date">Date</label> <d ...

htmlcsstwitter-bootstrapbootstrap-4html-select

Using Django to render multiple images for a post

For the past few days, I have been attempting to provide the admin user with the ability to upload multiple images/slides for each individual post. One idea that came to mind was nesting a for loop inside the posts' for loop so that for every post, al ...

htmldjangodjango-modelsrendering

Revamp responsiveness in bootstrap 3 for printing with @media queries

My goal is to disable the responsive features of bootstrap when the event javascript:print() is triggered. This way, I want my webpage to maintain the column grid layout that I have defined, regardless of screen size. One solution suggested in this answer ...

javascriptcsstwitter-bootstrapmedia-queries

Add transparency to a component using CSS

I am currently facing an issue with a div element called signup-box. I have applied an opacity value of 0.65 to it, but unfortunately, this is affecting everything within the div as well. This means that my white text is no longer visible as white and th ...

htmlcss

Transform CSS filters into SVG filters

Implementing CSS filters on the <img /> elements has been successful for me. For example: filter: brightness(1) contrast(67%) saturate(250%) grayscale(0%) invert(0%) hue-rotate(330deg) sepia(40%) blur(0px); Now, I am trying to apply the same filte ...

htmlcsssvgsvg-filterscss-filters

Is there a way to set the starting position of the overflow scroll to the middle?

Is there a way to have the overflow-x scrollbar scroll position start in the middle rather than on the left side? Currently, it always begins at the left side. Here is what it looks like now: https://i.stack.imgur.com/NN5Ty.png If anyone knows of a soluti ...

javascripthtmlcssvue.jsfrontend

Place an element in relation to its initial position, ensuring that the x-coordinate is not set to 0

Is there a method to place an element in relation to its initial position, only excluding x=0 - meaning that the element is placed at its original vertical coordinate but sticks to the window's left edge? ...

htmlcss

I am experiencing issues with my button not responding when I click on the top few pixels

I've created a StackBlitz version to illustrate the issue I'm facing. It seems like the problem might be related to my CSS for buttons... Essentially, when you click on the button at the very top few pixels, it doesn't register the click an ...

css

The issue of centering not working with a specified width under the CSS rule `margin: 0 auto

As I was creating sections for a mini "about me" page, I encountered an issue with setting margins in all divs (this one is the most important). Despite specifying widths and heights, I couldn't get margin: 0 auto; to work. body { background: #aaa; ...

htmlcss

Navigate to the AngularJS documentation and locate the section on monitoring data changes after a dropdown selection

Just starting out with AngularJS and Stack Overflow, so I hope I am asking this question correctly. I am working on a single-page application with editable text inputs. Two select drop-downs are used to control which data is displayed - one for time perio ...

javascripthtmlangularjsdrop-down-menumodal-dialog

What is the process for creating instant notifications using AJAX, PHP, and MySQL?

I am looking to implement real-time notifications on my website and have already set up the notification bar: <div class="alert alert-info alert-with-icon" data-notify="container"> <button type="button" aria-hidden="true" class="close"> ...

javascriptphphtmlmysqlajax

Choose items that do not contain ::before or ::after pseudo-elements

I am looking to apply a specific font style to all text on a page except for Font Icons (specifically Font Awesome) which do not share a common class. In order to achieve this, I need to target elements in one of the following ways: Elements that do not ...

csscss-selectorsfont-awesome

HTML various button designs - such as a cogwheel

I need a button on my Angular/Electron project that resembles a gear icon. I came across these resources: here and here. However, when I tried to implement them, they didn't work as expected. Currently, the button looks like this: <button class= ...

htmlangularelectron

"Using Flexbox to Align Child Elements of Varying

After learning about flexbox, a pressing question arose: How can I create a layout of columns similar to the one shown in this image? Check out MyCodeFiddle for more details! (http://jsfiddle.net/1s3bo913/) Click here to view the layout project: Layout Pr ...

htmlcssflexbox

Loss of styling is observed with jQuery's html() function

Here is the HTML code I am working with: <div class="myList"> <select> <option value="1">Item1</option> <option value="2">Item2</option> </select> </div> Everything looks great in terms of CS ...

htmlcssajax