What could be causing my HTML table to stretch all the way to the bottom and right?

https://i.sstatic.net/SpG52.png

The layout appears to be extending to the right and bottom, despite my attempts to fix it. I am utilizing the Bootstrap table class in my code. Here is the code snippet:
HTML:

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>  
<body>
<table class="table table-bordered">
  <tbody>
    <tr>
      <td class="1"></td>
      <td class="2"></td>
      <td class="3"></td>
    </tr>
    <tr>
      <td class="4"></td>
      <td class="5"></td>
      <td class="6"></td>
    </tr>
    <tr>
      <td class="7"></td>
      <td class="8"></td>
      <td class="9"></td>
    </tr>
  </tbody>
</table>
</body>

CSS:

table {
  width:500px; 
  height:500px;
  position: absolute;
  left: 37.25%;
  top: 20%;
  table-layout: fixed;
}

td {
  border:2px solid #428bca;
  height:100px;
  width: 100px;
}

tr {
  background-color:white;
}

Is there a solution to correct this issue? Thank you for taking the time to read! Edit: Here is the desired appearance of the table:https://i.sstatic.net/25a42.png

Answer №1

After considering your objective, I suggest making the following adjustments to your CSS:

table
{
    height:800px;
    position: absolute;
    table-layout: fixed;
}
td
{
    border:2px solid #428bca;
    height:100px;
    width: 100px;
}
tr
{
    background-color:white;
}

If you want the table to occupy the entire screen height and fit the boxes accordingly, you will need to dynamically adjust the height using Javascript.

For more information, you can visit the following link: https://www.w3schools.com/jsref/prop_screen_height.asp

Best regards

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

Padding in Bootstrap 4 columns in a vertical alignment when breaking the layout

I created a customized form-group to accommodate both large and small screens. The structure looks like this: <div class="form-group row"> @Html.LabelFor(model => model.ValidFrom, "Valid from", htmlAttributes: new { @class = "col-lg-3 ...

Dynamic line breaks within an unordered list

I have a requirement where I need to display the last two li elements from an ul list on a new line if the screen width is less than 625px. The code snippet below achieves this functionality: ... ... ... ... However, this code fails valida ...

Display a petite popup above the selected text within the Code Mirror editor

I have been utilizing the following code snippet to highlight text segments in Codemirror, a renowned code editor and syntax highlighter that can be downloaded from this link. Despite referring to the documentation, I am still unable to grasp how this fun ...

The React task list updates the todo items on change, rather than on submission

As a newcomer to React, I have embarked on the classic journey of building a todo app to learn the ropes. Everything seems to be functioning smoothly except for one minor hiccup: When I input a new todo and hit "submit", it does get added to my array but d ...

Overriding Styles Set by an External CSS file

Let's assume that I have two different style sheets set up on my webpage: site.css: .modal { position: absolute; width: 200px; ... } ... reset.css: .reset * { position: static; width: auto; ... } Unfortunately, I don ...

Ensure alignment of gradients between two divs, even if their widths vary

Among my collection of 10 inline divs, each one boasts a unique width and color gradient. While the 45-degree lines are uniform across all the divs, is there a way to ensure that these gradients match seamlessly? I've shared my CSS code snippet below ...

Steer clear of moving elements around in d-flex or similar layouts

I am looking to arrange elements in a linear manner with equal spacing between them. While I can achieve this using Bootstrap 5 flex, the spacing changes when the text length of a button is altered. https://i.sstatic.net/kVc8l.png For example, the element ...

What is the best way to align my two buttons in the center?

I'm having trouble aligning my two buttons to the center. Additionally, I'm not sure how to remove the gray color from inside the buttons. Here is the code: index.html <!DOCTYPE html> <html> <head> <met ...

Issues encountered with utilizing a Python dictionary within a Django template

Hey there, I've got a python dictionary that holds information about size and quantity titled final_list. I'm passing this dictionary to the template using "sizes": final_list. In my html template, I'm trying to create a dropdown m ...

I'm having trouble getting my Retina image code to work perfectly. The high resolution image isn't loading at its full

After learning how to display my Retina optimized logo from this tutorial (link), I encountered an issue when testing on my iPad and Samsung Galaxy Note II (using Safari, Firefox, Dolphin apps). The Retina image is showing up at its full size of 1200px x 5 ...

Complete the JQuery code by closing the div and ul tags, then proceed to open a

Need help with structuring HTML <div class="content"> <p>Lorem ipsum dolor sit amet</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <span>Dolor set amet conse ...

Experience a seamless front/back DIV transition with a mouseover effect similar to the ones on USAT

Recently, I was tasked with creating a mouseover transition effect for a div similar to the one used on USAToday's website. The structure of the boxes on the site includes: <div class="asset"> <div class="front">'image and some t ...

What are the best methods for visually comparing two HTML documents?

In the process of developing a Windows Forms application, my goal is to compare two HTML documents. The initial document is sourced externally and contains structural errors. To address this, an algorithm is utilized to optimize the HTML text, resulting in ...

Using jQuery to create two identical widgets

Just starting out with JQuery and had a question about a specific problem I'm facing: Imagine you want to include 2 textboxes with datepickers on an HTML page using jQuery UI. Since jQuery works based on "ID" rather than "Class", the following code w ...

How can a block be made to stay fixed and float in a flexbox layout?

There are three blocks within the body of this page. Title bar Content block Bottom block I have employed a flex display for the body layout. My goal is to make the title bar float, meaning it should always remain at the top when scrolling. I attempted ...

Utilizing a Custom Validator to Compare Two Values in a Dynamic FormArray in Angular 7

Within the "additionalForm" group, there is a formArray named "validations" that dynamically binds values to the validtionsField array. The validtionsField array contains three objects with two values that need to be compared: Min-length and Max-Length. F ...

I'm curious about the location where label_color keys are stored within apache-superset

Version: I have installed a Docker instance of Superset from this source The documentation mentions that colors can be customized based on labels, as explained here. To achieve this, it is necessary to provide a mapping of labels to colors in the JSON ...

Troubleshooting inconsistent htaccess changes across different pages?

After much trial and error, I have successfully managed to run PHP code within a document that has either an .htm or .html extension. The solution that worked for me was adding the following line of code: AddType application/x-httpd-php .php .html .htm N ...

Font Awesome solely alters the font size within html, rather than css

<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 50px;"></i> It's functioning properly. .fa-graduation-cap { margin-top: 38px; color: #E46A6B; font-size: 50px; } Not working too well. This issue is new to me. Any th ...

I would like to add an underline below the title

.thumb-text { position: absolute; width: fit-content; left: 50%; transform: translateX(-50%); } .thumb-text h3 { font-family: Georgia; font-size: 30px; color: black; font-weight: 900; } .thumb-text h3::after { content: ''; p ...