Tips for arranging 3 tables in the right place using CSS

I have 3 tables that I utilize. My goal is to:

  • have one on the left side of the page

  • place one in the center of the page

  • position one on the right side

All at the same height.

The issue arises when the tables expand and using float causes them to overlap the content below, which is not ideal for me.

This is an example of table code:

<table id="budget">
    <tr>
        <th>Project name</th>
        <th>Deadline</th>
        <th></th>
    </tr>
    <tr>
        <td>Project 1</td>
        <td>24/1/2014</td>
        <td><div class="arrow"></div></td>
    </tr>
    <tr><ul>
        <td colspan="5">
         <li> Your total hours: 3:00</li>
          <li>Budget left: &euro;100</li>
                    </ul>
        </td>
    </tr>

</table>

Is there perhaps a better way to arrange these tables? I am open to new suggestions.

htmlcsshtml-table

Answer №1

Creating a 3-column layout

Using HTML:

<div id="container">
  <div class='left third'>
    <table>
    </table>
  </div>
  <div class='centre third'>
    <table>
    </table>
  </div>
  <div class='right third'>
    <table>
    </table>
  </div>
</div>

Styling with CSS:

div.third{
  width:33%;
}
div.left{
  float:left;
}
div.right{
  float:right;
}
div.centre{
  float:right;
}
/* Center the middle table */
div.centre table{
  width:#####px;
  margin: 0 auto;
}

Additional notes:

1) The column widths are set to 33% instead of 33.3% to prevent issues with browser wrapping.

2) Avoid setting margins for the columns.

3) Consider using a framework like Bootstrap for standardized layouts.

Answer №2

Using CSS margins is a simple way to add space around elements:

  • margin-left:.....
  • margin-right:....
  • margin-top:.....
  • margin-bottom:....

If you want to customize the spacing for individual td's and th's, consider assigning them unique IDs for separate control.

Answer №3

It appears that you are requesting a table with three rows and columns that can accommodate expanding content.

To apply a stylesheet to the header, use the following code:

<link rel="stylesheet" href="q1.css" type="text/css">

TABLE

<table >
<tr >
    <th >Project name</th>
    <th>Deadline</th>
    <th></th>
</tr>
<tr >
    <td>Project 1</td>
    <td>24/1/2014</td>
    <td><div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div></td>
</tr>
<tr>
<td colspan="5">
<ul>

     <li> Your total hours: 3:00</li>
      <li>Budget left: &euro;100</li>
                </ul>
    </td>
</tr>

</table>

CSS CODE

table,th,td
{
border : 1px solid black;
border-collapse : collapse;
}
td{
width:10px;
height:10px;
overflow:auto;
}
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}

If the table is overlapping other contents on the page, consider adding the following CSS:

clear:both;

The clear property specifies which sides of an element floating elements are not allowed to touch.

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

Showing JSON data on a webpage

Hey there, I'm looking to showcase information from a MySQL table in an HTML document. Currently, I have a PHP script that is up and running: <html> <head> </head> <body> <?php $mysqli = new mysq ...

phphtmlmysqlajaxjson

What methods can I use to create a navigation bar similar to this design?

Lately, I've noticed a growing trend in navigation bars that are designed to resemble waves. Wavey Navbar I'm eager to incorporate a similar navbar into my website, but I'm struggling to figure out how to do it. I'm working with react ...

htmlcss

Discover the secret to incorporating concealed text in WordPress with a hidden div through the power of JavaScript

For a while now, I've been trying to implement a functionality where clicking on a text reveals a dropdown menu with more information, similar to a "read more" feature. I have limited experience in Java or jQuery, and I can't figure out if the i ...

javascriptphpjqueryhtmlwordpress

When using jQuery with a large selectbox, you may encounter the error message: "Uncaught RangeError: Maximum

My select box works fine in IE and Mozilla, but throws an uncaught rangeError in Chrome when choosing the "Others" option to display a second select box with over 10k options. How can I diagnose and resolve this issue? <!DOCTYPE html> ...

javascriptjqueryhtmlgoogle-chromedrop-down-menu

Is there a way to smoothly navigate back to the top of the page after the fragment identifier causes the page to scroll down?

I do not want to disable the functionality of the fragment identifier. My goal is for the page to automatically scroll back to the top after navigating to a specific section. This inquiry pertains to utilizing jQuery's UI tabs. It is crucial to have ...

javascriptjqueryhtml

What causes the difference in behavior between Firefox and Chrome when it comes to multiple column rendering and the use of overflow

Recently, I came across an interesting issue in Firefox related to lists inside a div with columns:2 set. In Firefox, when overflow:hidden is applied to the list, it stops rendering in 2 columns. However, in Chrome, the list continues to render in 2 colum ...

htmlcssgoogle-chromefirefoxcss-multicolumn-layout

What causes the CSS Position Fixed Property to fail?

Can someone help me fix my navbar so that it remains fixed when I scroll? Currently, it moves up as I scroll down. Below are the source codes I'm using: * { margin: 0; padding: 0; box-sizing: border-box; } h1 { margin: 1rem; } ul { posit ...

htmlcsspositioncss-position

Tips for incorporating a Font Awesome icon <i> within a select dropdown and customizing its appearance

I am facing an issue while trying to insert an icon into a select option. The error message I received is: Warning: validateDOMNesting(...): cannot appear as a child of <option> To indicate that certain fields are required, I am using asterisk ic ...

javascripthtmlcssreactjsfont-awesome

Make sure to always target a specific DIV element, regardless of whether any of its child divs are

I have a div named "box" nested inside another div called "container." When I click on the box, I am able to retrieve its ID perfectly. However, when I click on the container, I want to obtain the ID of the box instead of the container. Is there a way fo ...

jqueryhtmlangular

Troubleshooting: Why the TableTools basic usage example is not functioning as

After replicating the code from http://datatables.net/release-datatables/extensions/TableTools/examples/simple.html in my Visual Studio project, I organized the files by saving two css files as style1.css and style2.css, along with three js files named sc ...

javascripthtmlcsstabletools

Spinning text within a circular rotation in CSS

Looking for guidance on how to center the "hallo" text inside a circle? Currently experiencing issues with the circle display in IE8 and Firefox. Any suggestions on how to fix this would be greatly appreciated. And here is the link to my code snippet: CSS ...

javascripthtmlcss

Update the image source every few seconds

I am attempting to show the same image in both gif (animated) and jpeg formats. I am updating the src every few seconds. After checking in the developer tools, it seems that the src has been modified, but the gif does not appear to be animating. setInter ...

javascripthtml

A versatile function that displays a loading icon on top of a specified div

Is it possible to pass an identifier for a particular div element to a function, where the function will display a loading image that covers the entire div, and then pass the same identifier to another function to hide the loading image? I am looking to cr ...

javascriptjqueryajaxhtmlcss

Whenever I include an onClick event to a div element, the entire webpage fails to display

Currently taking on the task of developing a seat booking website. I am encountering an issue with adding an event listener to a particular div element, which should trigger a function to store the value of the div. However, upon implementing the onClick e ...

javascripthtmlreactjs

Scrolling in iOS 8 causing flickering problem with background image

Utilizing the Supersized jQuery slider plugin to create a full-page background slider with a fade-in effect and added height for scrolling. The slider functions correctly on desktop, but upon testing on an iOS 8 iPad device, there is noticeable flickering ...

javascriptjqueryhtmlioscss

What is the best way to incorporate CSS into this HTML document?

Content has been omitted. It is crucial to review documentation in advance in order to reduce repetitive inquiries. Check out the Webpack v2 documentation. ...

csswebpackcss-loader

Increase the Step Size of an HTML Number Input by Holding Down the Time

Is there a way to implement increasing increment/step size for number inputs in HTML based on how long the user holds the stepper arrows? For instance, starting at step size=1 and gradually ramping up to larger increments like 5, 10, 20, etc. after holdin ...

javascripthtml

Determine the currently active view on a mobile device

I am trying to determine whether the user is viewing the website vertically or horizontally on their mobile device or iPad in order to adjust the image scale accordingly. For example: If the user is viewing the page horizontally, I want the image style t ...

jquerycssmobile

Implement a unique feature for specific days using jQuery UI Datepicker with a customized class

Looking to highlight a range of days horizontally in jQuery UI Datepicker with the multiselect plugin. To achieve this, I am utilizing the :before and :after pseudoelements of the a tags. .ui-state-highlight a:before, .ui-state-highlight a:after { con ...

javascriptjquerycssjquery-uidatepicker

What are the dimensions for maximum picture width and height in the Bootstrap 4 grid class col-4? Additionally, can you provide some tips on minimizing image bl

Hey there! I am trying to arrange 3 screenshots in 3 separate columns in one row, resembling steps 1, 2, and 3. I want them all to have the same size. Can you advise on the maximum width and height I should use before they start getting stretched or comp ...

htmlcssbootstrap-4