Tips for positioning tables on a page

I have 4 tables and a submit button. How can I make them more compact? Maybe like this:

This is my HTML code:

<body>
    <form action="/cgi-bin/form.py" id="myform">
        <table class="table-fill">
            ...
        </table>

        <table class="table-fill">
            ...
        </table>
     ...
        </table>
        <input type="submit" name="add" value="Submit" form="myform"/> 
    </form>
</body>

This is my table style:

.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: 120px;
margin: auto;
max-width: 100px;
padding:5px;
}

My submit button style:

input[type=submit] {
    padding:10px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: auto;
    display: block;
    }

Answer №1

One technique is to use the CSS property display: inline-block on the table style and adjust margins accordingly.

.table-fill {
 display: inline-block;
  
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  border-color: 1px solid #000;
  height: 120px;
  max-width: 100px;
  padding:5px;
  margin: 5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}

input[type=submit] {
    padding:10px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: auto;
    display: block;
    font-size: 14px;
    font-weight: 300;
    margin-top: 10px
}
<div class="table-fill">block 1</div>
<div class="table-fill">block 2</div>
<div class="table-fill">block 3</div>
<div class="table-fill">block 4</div>
<div class="table-fill">block 5</div>
<input type="submit"/>

Alternatively, you can create a container and utilize flex for easier centralized alignment of tables:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-fill {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  border-color: 1px solid #000;
  height: 120px;
  max-width: 100px;
  padding:5px;
  margin: 5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
  animation: float 5s infinite;
}

input[type=submit] {
    padding:10px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: auto;
    display: block;
    font-size: 14px;
    font-weight: 300;
    margin-top: 10px
}
<div class="container">
  <div class="table-fill">block 1</div>
  <div class="table-fill">block 2</div>
  <div class="table-fill">block 3</div>
  <div class="table-fill">block 4</div>
  <div class="table-fill">block 5</div>
</div>
<input type="submit"/>

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

Utilize ngModel in conjunction with the contenteditable attribute

I am trying to bind a model with a tag that has contenteditable=true However, it seems like ngModel only functions with input, textarea or select elements: https://docs.angularjs.org/api/ng/directive/ngModel This is why the following code does not work ...

Adjustable height for Divs placed between stationary Divs

As a beginner, I have a question that may seem simple to some. I want to create a layout with fixed divs at the top and bottom, but a flexible one in between. To help explain, I've created a sketch. If anyone could provide me with a starting point, I ...

Combine Two Values within Model for Dropdown Menu

I am currently facing a situation where I have a select box that displays a list of users fetched from the backend. The select box is currently linked to the name property of my ng model. However, each user object in the list also contains an email proper ...

The header and navigation bar are both set to stay in place, but unfortunately my div element is not displaying beneath

After setting both the Nav and Header to fixed, everything seems to start out well. I adjust the Nav margin-top so that it appears below the header, which works fine. However, things take a wrong turn when I try adjusting the div. The div ends up behind th ...

Vertical scroll through a list of columns with a stationary header, while allowing both the list and the header to

Check out this JSFiddle example: https://jsfiddle.net/jefftg/1chmyppm/ The layout currently has orange header columns and white list rows that scroll together horizontally. However, the goal is to have the white list rows scroll vertically while keeping t ...

Guide on making a button display an image, then switch back to the initial image when clicked again

Currently, I have this neat feature on my website where there's a button that toggles the image/background color - kind of like a dark mode switch. The background change is working fine, but I'm encountering some challenges with organizing the im ...

Problem with looping through arrays in JQuery using .each() function

Looking for some help with jQuery and JavaScript, please bear with me if my question seems naive. I am attempting to load images from different folders into corresponding divs to create a gallery. <div id="menu"> <div class="gallery" id="div0"&g ...

What is the process for including CSS in the .ashx.cs code-behind file in ASP.NET?

How can I insert a css class in the .ashx file while the .aspx UI page displays it as a string? What is the method to include css in the code behind of the .ashx page? I would like the text "Cook" to be displayed in red. Problem: https://i.sstatic.net ...

Acquire the content of a nested element using jQuery

I have a navigation list with separate headlines and text for each item. The goal is to switch the main headline and paragraph of text when hovering over a navigation item. CodePen Example Currently, my code displays all text. I only want to display the ...

"What are some creative ways to customize the appearance of a Material-UI Select-field Dropdown menu

I am currently utilizing the material-ui select-field component. <SelectField multiple={true} hintText="Checkbox Filters" dropDownMenuProps={{ iconButton:<ActionHome />, }} className="checkbox-com" underlineStyle={{display ...

Provide a unique <li> attribute for the JavaScript function to utilize

Is there a way to pass specific attributes from dropdown options to a javascript function? I have tried using .data() and .attr(), but the console keeps showing "undefined". Any suggestions on how to achieve this in a cleaner and simpler way would be gre ...

I have been working on creating a hangman game, and although I have figured out the logic behind it, I am experiencing an issue where it is not functioning properly. After inspect

I am currently working on a basic hangman game using only HTML and JavaScript. I have the logic in place, but it doesn't seem to be functioning correctly. When I inspected the element, it showed an error saying 'undefined toUppercase.' As a ...

Using jQuery to trigger a click event on a radio button prevents the button from being checked

Having trouble with using the .trigger("click"); function on radio buttons to activate a button in a form. When I use the code below, the button is triggered as expected. However, it seems to be interfering with the radio button, causing it to appear chec ...

What content appears post-iframe?

After researching for a while, I've only come across information about text displayed after a broken iframe on this topic. However, what I actually want to do is display text below an iframe set at 90% height, like so: https://i.sstatic.net/KHXI3.png ...

Leveraging the power of React in conjunction with an HTML template

After purchasing an HTML template from theme forest, I am now looking to incorporate React into it. While I find implementing Angular easy, I would like to expand my skills and learn how to use React with this template. Can anyone provide guidance on how ...

Mobile menu in Bootstrap failing to show up

Hello, I am creating a website using Bootstrap and I am encountering an issue with the hamburger menu not appearing when I resize the screen. Here is the code I am using: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi ...

Is there a way to change OTF/TTF file formats into EOT?

Is there a simpler way to convert my OTF/TTF fonts to EOT format for Microsoft browsers' @font-face feature? I attempted using the WEFT tool but without success. Any alternative methods available? ...

Create HTML content from a file retrieved from the server

I have been working on a dynamic website project, diving into web development from scratch despite having coding experience in general. As I navigate Angular CLI and Bootstrap, I've come across a fundamental question: Do modern websites house all thei ...

The process of adding a tooltip icon to a Select component in Material-UI

I'm currently working with the material UI tooltip component and I want to position my tooltip to the right of a dropdown, right next to the down arrow as shown in the image below: https://i.stack.imgur.com/O2gwh.png However, the way it is set up no ...

Angular formly - Enhancing User Input Focus

I have created a field wrapper that converts normal text into an input when hovered over with the mouse. Additionally, I have a directive that sets focus on the field when it is activated. Now, I am looking for a solution where the field remains open as l ...