What determines the padding of a display:table-cell?

I am currently working on creating a table-like layout where medicine names will be displayed on the left and data will occupy the rest of the table. In simpler terms:


           +-------------+------------+
medicine 1 |  some data  | some data  |
           +-------------+------------+
medicine 2 |  some data  | some data  |
           +-------------+------------+

To keep the data grid dynamic, I have used two <div> elements with the style display:table-cell as containers - one for the medicine names on the left and the other for the data grid on the right. There are multiple inner <div> elements inside these two table-cell <div> elements. However, when I inspected the layout using Chrome's inspect interface, I noticed that the left container has a large padding area at the top (please refer to the image below):

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

I am unsure about what might have caused this issue, and the inspect interface did not provide information that could help me understand the problem. I would appreciate any guidance on how to address this situation. Below is the HTML code for your reference:

<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell">
      <div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
        Dexedrine Spansules (Dextroamphetamine, ER) <br/><span style="font-style:italic">(20mg)</span>
      </div>
      <div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
        Methamphetamine (Desoxyn, IR) <br/><span style="font-style:italic">(15mg)</span>
      </div>
    </div>
    <div style="display:table-cell; overflow:hidden; max-width:800px">
      <div id="medicine_table_container_2" class="medicine-table-container" style="position:relative; left:0">
        <div style="white-space:nowrap; font-size:0px">
          <div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
            <div>
              <div style="display:inline-block; width:70px; height:45px">
                Morning<br/>-
              </div>
              <div style="display:inline-block; width:50px; height:45px">
                Noon<br/>5mg
              </div>
            </div>
            <div>
              <div style="display:inline-block; width:70px; height:35px">
                Afternoon<br/>12mg
              </div>
              <div style="display:inline-block; width:50px; height:35px">
                Evening<br/>-
              </div>
            </div>
          </div>
        </div>
        <div style="white-space:nowrap; font-size:0px">
          <div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
            <div>
              <div style="display:inline-block; width:70px; height:45px">
                Morning<br/>-
              </div>
              <div style="display:inline-block; width:50px; height:45px">
                Noon<br/>5mg
              </div>
            </div>
            <div>
              <div style="display:inline-block; width:70px; height:35px">
                Afternoon<br/>12mg
              </div>
              <div style="display:inline-block; width:50px; height:35px">
                Evening<br/>-
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

htmlcsscss-tables

Answer №1

This content discusses the issue of vertical alignment, specifically focusing on how changing the alignment to top on the table-cell can resolve the problem that arises when the default setting is baseline.

<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell;
    vertical-align: top;">
      <div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
        Dexedrine Spansules (Dextroamphetamine, ER) <br/><span style="font-style:italic">(20mg)</span>
      </div>
      <div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
        Methamphetamine (Desoxyn, IR) <br/><span style="font-style:italic">(15mg)</span>
      </div>
    </div>
    <div style="display:table-cell;
    vertical-align: top; overflow:hidden; max-width:800px">
      <div id="medicine_table_container_2" class="medicine-table-container" style="position:relative; left:0">
        <div style="white-space:nowrap; font-size:0px">
          <div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
            <div>
              <div style="display:inline-block; width:70px; height:45px">
                Morning<br/>-
              </div>
              <div style="display:inline-block; width:50px; height:45px">
                Noon<br/>5mg
              </div>
            </div>
            <div>
              <div style="display:inline-block; width:70px; height:35px">
                Afternoon<br/>12mg
              </div>
              <div style="display:inline-block; width:50px; height:35px">
                Evening<br/>-
              </div>
            </div>
          </div>
        </div>
        <div style="white-space:nowrap; font-size:0px">
          <div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
            <div>
              <div style="display:inline-block; width:70px; height:45px">
                Morning<br/>-
              </div>
              <div style="display:inline-block; width:50px; height:45px">
                Noon<br/>5mg
              </div>
            </div>
            <div>
              <div style="display:inline-block; width:70px; height:35px">
                Afternoon<br/>12mg
              </div>
              <div style="display:inline-block; width:50px; height:35px">
                Evening<br/>-
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

To illustrate the issue and solution more clearly, a simpler code snippet is provided:

.table {
  display: table;
  border: 1px solid;
  margin: 5px;
}

.table>div {
  display: table-row;
}

.table>div>span {
  display: table-cell;
  padding: 0 5px;
}

.table>div>span span {
  display: inline-block;
}
baseline
<div class="table">
  <div>
    <span>one line</span>
    <span><span>two <br> line (inline-block)</span></span>
  </div>
</div>

... (more code snippets included)

The issue with using inline-block along with overflow:hidden causing unexpected results in baseline calculation is highlighted. By adjusting the vertical alignment to top, the problem can be resolved in various scenarios.

Answer №2

It appears that Temani Afif has already suggested a solution to your initial issue. However, just in case it proves helpful to you or others, here is the fundamental structure of a table with sub-tables:

Styling

<style>
    .table {
        display:table; border:1px solid #ccc; border-collapse:collapse
    }
    .table .row {
        display:table-row; border:1px solid #ccc; border-collapse:collapse
    }
    .table .row .headercell {
        display:table-cell; border:1px solid #ccc; height: 80px; width: 150px; border-collapse:collapse
    }
    .table .row .cell {
        display:table-cell; border:1px solid #ccc; height: 80px; Width: 300px; border-collapse:collapse
    }
</style>

Table Setup

<div class="table">
    <div class="row">
        <div class="headercell">
            Row1
        </div>
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">
                        Cell1
                    </div>
                    <div class="cell">
                        Cell2
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        Cell3
                    </div>
                    <div class="cell">
                        Cell4
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="headercell">
            Row2
        </div>
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">
                        Cell1
                    </div>
                    <div class="cell">
                        Cell2
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        Cell3
                    </div>
                    <div class="cell">
                        Cell4
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

Toggle visibility

Seeking a unique example of a div SHOW / HIDE functionality where multiple divs are populated within the main container. Specifically looking to display new paragraphs or topics of text. I have experience with standard show/hide techniques for collapsing ...

javascripthtml

The select2 jQuery plugin is malfunctioning following an AJAX request to update the HTML content

I have implemented an AJAX function to change the content of a HTML div. Within this changed content, there is a select box with the 'select2' jQuery class. However, after the AJAX load, the select2 jQuery plugin does not work properly. Here is ...

jqueryhtmlajaxjquery-select2

"Adjusting the width of columns in a Datatable

I have arranged a data table with multiple rows and columns, and I am seeking guidance on how to increase the width of the "Tel. 1, Tel. 2, and Fecha" columns to ensure that the text appears on a single line. I've attempted adjusting the s width and t ...

javascripthtmlcssdatatables

Is there a way to automatically extend my content to fill the space on the page below the Material UI AppBar?

I am currently using React and Material UI React to develop my application. My goal is to implement the AppBar component with content underneath, without causing the entire page to scroll. I want the content to occupy the maximum remaining height and the f ...

cssreactjstypescriptmaterial-ui

Tips for styling PHP-generated HTML code

I have a snippet of HTML code that needs to be displayed within a specific <div> tag. The HTML code is as follows: <form id="web_formsGenerateFormForm" method="post" accept-charset="utf-8"> <input type="hidden" name="_method" value="POST"/& ...

javascriptphpjqueryhtmlcakephp-2.0

Getting rid of unwanted scrollbars in a breeze

I am facing an issue with two nested divs that have the same height settings. The outer div has a max-width/height constraint along with overflow auto, causing scrollbars to appear when the inner content exceeds its dimensions. However, even if I resize ...

javascripthtmlcss

Exploring the Breakpoints of Bootstrap 4.x Grid System in Development

Understanding the grid system in Bootstrap 4.x can be beneficial, especially when trying to determine the specific grid breakpoint that aligns with the current viewport width. ...

htmlcssbootstrap-4responsive-design

Is it true that event.stopPropagation does not function for pseudoelements?

I am facing an issue with event handling in my ul element. The ul has three li children elements, and the ul itself has a useCapture event handler for click. In the click event handler, I successfully stop the event using event.stopPropagation(), and every ...

javascripthtmlcss

What is the best way to switch image position using javascript?

I'm experimenting with creating a function that toggles the image source when clicked - changing it back and forth. <img src="http://images.clipartpanda.com/laughing-smiley-face-clip-art-smiley-face-clip-art10.jpeg" longdesc="http://sm ...

javascriptjqueryhtmlimage

What is the best way to maintain the CSS3 animation state following ng-animate?

Attempting to alter the state of a div using ng-animate along with CSS3 transitions. The animations are functioning well with this particular CSS, except for the issue where the div loses its size and color once the animation is completed. .fade-hide, .f ...

cssangularjsng-animate

Guide to ensuring the navbar remains at the top of the webpage following an image

I am attempting to create a sticky navbar that stays at the top of the page once the header has been scrolled past. It should have a similar effect as shown in this example on codepen.io, but with the addition of an image that stretches across most of the ...

javascriptjqueryhtmlcss

I am looking for a way to display multiple images when the user clicks a button. It needs to be done

After successfully implementing a draggable single circle image when clicking a button, I am now looking to add multiple circle images each time the button is clicked. I'm considering using the append function with the canvas tag for this purpose. Ca ...

jqueryjquery-uicsshtml5-canvas

Creating a CSS slideshow with z-index

Is it feasible to use CSS exclusively to design a carousel that switches the z-index of divs at set intervals (for example, every 5 seconds)? The divs would be arranged in layers on top of each other and as their z-index changes, they would move forwards ...

cssloopsz-indexcarousel

Performance challenges with an AngularJS application that uses pagination

Resolving Performance Issues in Paginated AngularJS Posts Application I developed a compact application that showcases JSON data as cards using AngularJS and Twitter Bootstrap 4. The app includes pagination with approximately 100 posts per page. var ro ...

javascripthtmlangularjstwitter-bootstrap

The hide and show buttons seem to be missing when utilizing the datatable API

For my current project, I referenced this example: https://datatables.net/extensions/responsive/examples/styling/bootstrap.html Despite trying various datatable API examples, I'm still unable to display the expand/collapse buttons. The required CSS a ...

jqueryhtmlcssdatatable

Is there a way to determine if a user has interacted with a scrollbar on a website?

Is there a Jquery function available to determine if a user is currently holding onto a scrollbar on my website? I need to return a Boolean value based on whether the user has control of the scrollbar or not. Additionally, I am encountering a specific iss ...

javascriptjqueryhtmlajax

An assessment consisting of three parts, with the initial section required to match the size of the browser window using jQuery and Javascript

UPDATE: The issue was resolved by adding the Doctype at the top of the page - "<!DOCTYPE html>" (no spaces between tags < , > and other characters) I am experimenting with a webpage that contains four sections. The first section should take up ...

javascriptjqueryhtmlcss

Updating a div periodically with Ruby on Rails: The ultimate guide to implementing Ajax or alternative techniques

In my show.html.erb file, I have a div (with id "mydiv") that needs to be updated every few seconds with data from the server. To accomplish this, I am using AJAX with setInterval to fetch the latest information from the backend. However, I am unsure of ho ...

jqueryhtmlruby-on-railsajax

What is the best method for designing a slideshow with a background image on the body

I have been on a quest to find a simple background slideshow that fades images for the body of my website. Despite trying multiple Javascript options and CSS solutions, I have had no success. Someone suggested creating a DIV for the background, but I am ...

javascriptjqueryhtmlcss

Error in NodeJS (EJS): Unable to locate stylesheet file

Having trouble adding a CSS file to my Node.js project with the EJS Template Engine. The file cannot be found when trying to access it. GET http://localhost/css/bulma.css net::ERR_ABORTED 404 (Not Found) Project folder structure ./index.js ./views ...

cssnode.jsexpressnginxejs