Unexpected outcome when using div tags as tables

Currently, I am designing a layout that includes multiple tables. My goal is to display them in a more readable format rather than having them stacked on top of each other. To achieve this, I am utilizing the div tag to create cells of various sizes per row. Additionally, I want the tables within the div tags to be aligned vertically, so I have applied the display:table-cell style.

However, I have encountered an issue where the first "table row" behaves as expected, but the second table row ends up squishing everything to the left. I have created a JSFiddle demo to illustrate this problem. What could I be missing or doing incorrectly?

http://jsfiddle.net/K8AJn/

Sample HTML:

<div class="TR">
    <div class="TD" style="width:40%;">
        Info
    </div>

    <div class="TD" style="width:20%;">
        Some info
    </div>

    <div class="TD" style="width:40%;">
        More info
    </div>
</div>
    <br />

    <div class="TR">
    <div class="TD" style="width:50%;">
        Info 1
    </div>

    <div class="TD" style="width:50%;">
        Info 2
    </div>
</div>
<br />

CSS Style Applied:

div.TR {
    background-color:blue;
    display: table-row;
}
div.TD {
    background-color:red;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
}
csshtml

Answer №1

Your table rows and cells lack a point of reference, causing issues with positioning. Typically, they depend on the parent table to dictate their layout.

To resolve this, wrap all your TRs in a div with a class of TABLE and add the following CSS:

.TABLE {
    display: table;
}

Example HTML structure:

<div class="TABLE">
    <div class="TR">
        <div class="TD" style="width:40%;height:300px;">Info</div>
        <div class="TD" style="width:20%;height:300px;">Some info</div>
        <div class="TD" style="width:40%;height:300px;">More info</div>
    </div>
    <div class="TR">
        <div class="TD" style="width:50%;height:300px;">Info 1</div>
        <div class="TD" style="width:50%;height:300px;">Info 2</div>
    </div>
</div>

Check out this Fiddle for implementation details.

It's worth noting that while this method can work in specific scenarios, there are more efficient ways to create flexible layouts (and avoiding inline styles is highly recommended).

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

CSS grid layout exhibiting an undesirable space in the far right column

I've encountered an issue while attempting to create a grid template layout - there seems to be an unexpected column gap appearing on the right side. Any suggestions on how I can get rid of this? For reference, you can view the problem at this link ( ...

htmlcss

Personalized dropdown appearance

During my work on a select box, I discovered that custom styling is not possible. I attempted to use some plugins but did not find one that met my needs. I am seeking a dropdown menu with options in both black and gray, similar to this template but using ...

javascriptjqueryhtmlcss

Issue with Bootstrap 4 navbar collapse: it collapses correctly but unable to expand

I am currently learning how to use Bootstrap and I am experimenting with the navbar collapse feature. Although I have successfully collapsed the navbar, I am facing an issue where it does not expand when clicked on. I have exhausted all possible solutions ...

jqueryhtmltwitter-bootstrapbootstrap-4

Adding a continuous background video to a website with HTML/CSS

I've been struggling to set a video as the background of my website. Despite researching extensively, I can't seem to get it to work and I'm not sure where I'm going wrong. In my HTML code, this is what I have: <video id="bgVideo" ...

htmlcssvideo

Is it possible to merge elements into a carousel in the mobile display?

I have a collection of elements that I would like to combine into a swipeable carousel. Is there a way to achieve this, specifically to make it a carousel only in mobile view? If needed, here is the HTML code. Thank you for your assistance. <div class= ...

htmlcssbootstrap-4slidercarousel

Choosing a file path in JavaScript

Can JavaScript be used to choose a directory? I'm not looking to upload a file, just wanting to select a directory path. (Directory dialog or something similar) ...

javascripthtml

The initial navigation pill content failed to display in Bootstrap

I am experiencing an issue with my pills that have 4 tabs. Initially, when I reload the page, the content of the first tab does not show up. However, if I navigate to another tab and then back to the first tab, the content appears. Can anyone suggest a fix ...

jquerycsstwitter-bootstrap

Shuffle various div elements in a random pattern using jQuery

Check out this jQuery fiddle I'm using for my project: http://jsfiddle.net/BREvn/5/ Currently, I am creating a bird shooting game where the number of birds increases with each level. These birds are essentially represented by div elements, but I am ...

jqueryhtmlcss

The :not() selector does not overlook classes within list items that contain links

Struggling with using the :not() selector to exclude the .current class from the first list item. HTML: <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">Page 2</a</li> <l ...

htmlcsspseudo-class

Assigning a value using HTML code causes the input to malfunction

Trying to create a website with the goal of updating the database is proving to be challenging. The issue lies in the fact that some attributes from the database are in HTML format. Whenever I attempt to set an input's value to match the current attri ...

html

Defining the active element in the menu using JavaScript

I need help with my navigation menu: <ul> <li id="active"><a href="/">Home</a></li> <li><a href="/about/">About Us</a></li> <li><a href="/services/">Our Services</a>< ...

javascripthtmlcss

Component is unable to access global styles

Component utilizing global styles Global styles are specific to this component only, such as col-lg-2, col-md-4 -> global style import React from 'react' import ReactDOM from 'react-dom' import { AppContainer } from 'react-hot ...

javascriptcssreactjswebpack

Exploring the positioning, placement, and orientation of Bootstrap popovers

Is there a way to prevent the bootstrap popover from moving away from the triggering element when the window is resized? What CSS should be used to position the tip of the popover near the top corner instead of on the left? Despite setting the placement ...

jquerycsstwitter-bootstraptwitter-bootstrap-tooltipbootstrap-popover

Utilizing Multiple Calls in Django Templates

Hello, I am encountering an issue with multiple pagination on a single page. Let's say I have two lists, list1 and list2, displayed using Django paginator with variables list1_page and list2_page. Here is how my template is structured: {{ list1_page ...

htmldjangodjango-templatesdjango-pagination

Tips for locating and substituting a string in Javascript

Is there a way to locate a particular word within a string and substitute it using JavaScript? For instance Here is a lengthy sentence I want to locate the word "sentence" and modify it to "phrase", resulting in: Here is a lengthy phrase ...

javascripthtmlstring

Input element enables simultaneous input and output

Currently, I have a web audio player set up with a basic simulation of how the seekbar functions. The progress bar displays the advancement of the audio track, while an input bar appears on hover to enable user interaction. My issue lies in the fact that ...

javascripthtmlprogress-bar

Experiencing an issue where the canvas element fails to render on mobile Chrome browser,

I've encountered an issue with a script that draws a canvas based on the background color of an image. The image is loaded dynamically from a database using PHP. The responsive functionality works fine on mobile Safari, but not on Chrome. When the re ...

javascriptjquerycsshtmlcanvas

position the div correctly above the table

I am currently working on creating a scheduler that has specific requirements: Show the working hours for each resource Show the interviews, allow changing the interview duration by resizing, and move the interviews using drag-and-drop functionality. I ...

jqueryhtmlcss

Animated Gradient Header with CSS

I've been attempting to add an animated gradient to my header class, but so far I haven't been successful. I want the gradient to apply only to the header, not the body. Here's the link I'm using for reference: Can anyone offer some i ...

htmlcss

If the sidebar is not found on WordPress, delete the CSS code

This situation seems a bit strange when it comes to applying a background color. Here is the main structure: <section class="main-row"> <div class="container"> <div class="row"> <div id="primary" class="col-sm- ...

htmlcsswordpress