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

Step-by-step guide to implementing a user-friendly search input field using the powerful AngularJS material design framework

I am searching for an effortless method to implement a feature similar to the expandable search text field in angular-mdl. By clicking on a search button, it will expand into a text field. <!-- Expandable Textfield --> <form action="#"> < ...

javascripthtmlcssangularjsangular-material

Is it possible to add file content to the beginning rather than the end?

Looking for help with my form that allows staff to submit messages to our updates page. I currently have this code: $filename = "files/armaupdates"; $text = $_POST['update']; $updatesep = "<hr><br><hr><br>"; $fp = fopen ...

phphtml

Animation is not applied to Bootstrap Collapse on a row within a table

My Bootstrap 4 table has an issue - when I apply the "collapse" class to a table row, it behaves differently compared to applying it to a div element. Clicking "animate div" smoothly animates the target div, but clicking "animate tr" does not animate the ...

javascriptcsstwitter-bootstrapbootstrap-4

Debugging Slideshows Using JavaScript

I am currently working on creating a slideshow and I'm facing some challenges with the JavaScript functionality. Everything seems to be running smoothly except for one issue - when I click right once, it transitions correctly, but if I then click left ...

javascriptjqueryhtml

Utilizing jQuery Mobile to tap into smartphone functionalities like camera and calling capabilities

Can mobile features like the camera and sensors be accessed from an HTML page created with jQuery Mobile? In simpler terms, is it feasible to utilize mobile features using jQuery Mobile? It's clear that I will be accessing this page on a mobile phon ...

jqueryhtmljquery-mobile

The css cropping issue with sprite image is not being resolved

I'm currently working on creating a sprite image for the bottom links on our media page, but I seem to be having trouble getting the image to crop correctly. Can anyone point out where I may be making a mistake? CSS .footer{ position:absolute; ...

htmlcssimagemenusprite

Display a series of numbers in a stylish Bootstrap button with uniform dimensions

I am trying to find a way to show the number of days in a specific month within a bootstrap button. However, the code I have been using does not evenly distribute the buttons in terms of height and width. I would like the display to look similar to the sc ...

javascripthtmlcssbootstrap-4

Encountered a SyntaxError stating 'Unable to use import statement outside a module' while attempting to utilize three.js

I'm facing difficulties with incorporating three.js into my project. Initially, I executed: I am referring to the guidelines provided here: In my VS Code terminal for the project folder, I ran the following command: npm install --save three Subsequ ...

javascripthtmlthree.js

Mastering the use of Quasar variables in your scss styles is crucial for optimizing your

I recently set up a project using Vue3 and Quasar by running vue add quasar. However, I am struggling to figure out how to utilize Quasar sass/scss variables. According to the documentation, I should use the following syntax: <style lang="scss&quo ...

cssvue.jssassquasar-framework

Javascript use of overlaying dynamically generated Canvases

Currently, I am developing a game to enhance my skills in HTML5 and Javascript. In the beginning, I had static canvases in the HTML body but found it difficult to manage passing them around to different objects. It is much easier for me now to allow each ...

javascripthtmlcanvashtml5-canvas

How can you assign a value to an HTML Input by dragging an SVG shape or canvas?

I am currently in the process of creating a user interface for setting pricing parameters. There are three categories that need to be visually represented, along with two sliders to determine suggested Buy/Sell prices. To demonstrate my progress so far, I ...

javascripthtmlsvg

Setting the width of a wizard modal to auto

I am facing an issue with my modal wizard. The width of the first modal is perfect, but when I navigate to the second and third modals by pressing next, they automatically take on a fixed width size that I need to modify. I have tried declaring the width ...

htmlcssbootstrap-4

Ways to ensure a div is positioned beneath another div

I am facing an issue with two divs; one on the right and the other on the left. When I try to add a third div below the right div, it ends up appearing under the left div or at the left side of the left div. Here is my current setup: https://i.sstatic.n ...

htmlcss

Revise website design to adjust dynamically according to screen dimensions

Currently, I am working on a school project with a website created by former students. Unfortunately, I have limited knowledge of HTML and CSS which has made it challenging for me to ensure the site is mobile-friendly. There are issues such as text overflo ...

htmlcssiframeresponsive-design

Utilizing Material UI's React framework for maintaining uniform grid column heights

Take a look at the image provided for context. I am facing an issue with two div elements, where one should occupy 20% of the total browser height and the other should take up 80%. Currently, I am utilizing Material UI Grid for positioning, which looks lik ...

htmlcssmaterial-uigrid

Firefox and IE are unable to make changes to cssRules

To update existing global CSS rules, I access the document.styleSheets property to locate the rule and make modifications. The selector can be modified by accessing the selectorText property. Sample CSS code: <style type="text/css"> .class { ...

javascriptcssinternet-explorerfirefoxcross-browser

Stopping the WordPress gallery at the end without looping using Elementor

Is there a way to make my gallery stop at the end of the last picture without having to add any jQuery code? I inserted this gallery using elementor widgets and would appreciate your help on this matter. Additional information: Upon clicking on an image, ...

htmljquerywordpressgalleryelementor

Implementing Content-Security-Policy with React and Material-UI v4 for secure styling requirements

Utilizing a React UI with material-ui version 4, the web server is embedded within a JVM application during Production. Following npm build for the UI, the bundle is deployed alongside the server side code. An essential requirement involves implementing C ...

cssreactjsmaterial-uicontent-security-policy

Ideas for displaying or hiding columns, organizing rows, and keeping headers fixed in a vast data table using jQuery

My data table is massive, filled with an abundance of information. Firstly, I am looking to implement show/hide columns functionality. However, as the number of columns exceeds 10-12, the performance significantly decreases. To address this issue, I have ...

javascriptjqueryhtmlcssjquery-ui

Tips on showing a specific div when a button is clicked using jQuery and Bootstrap

In my button group, I have four buttons and I need one specific button to display certain div content when clicked. The displayed content should be based on which button is clicked. Is there a way to achieve this using Twitter Bootstrap jQuery in ASP.NET ...

javascriptjqueryhtmltwitter-bootstrap