I'm trying to come out with a table-like layout, with medicine names appearing on the left and the data occupy the rest of the table. Simply put:
+-------------+------------+
medicine 1 | some data | some data |
+-------------+------------+
medicine 2 | some data | some data |
+-------------+------------+
Since I want to keep the data grid dynamic, I use two <div>
's with the style display:table-cell
as two containers, the left one for all the medicine names, and the right one for the data grid. There are several inner <div>
's inside these two table-cell <div>
's, but I'm not sure why the left one has a big padding area on the top when I use Chrome inspect interface to investigate it (please see the image below):
I'm not quite sure which part went wrong, and the inspect interface didn't give me information that seems relevant. I want to learn how to approach this situation. Here 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>
This is about vertical alignment. The default one is set to baseline and produce this output. Simply change the alignment to top
on the table-cell
and you won't have this issue:
<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>
Since your code is a bit complex, here is a basic one to reproduce the issue and better understand what's happening:
.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> baseline <div class="table"> <div> <span>two<br> line</span> <span><span>two <br> line (inline-block)</span></span> </div> </div> baseline (with overflow:hidden) <div class="table"> <div> <span>one line</span> <span><span style="overflow:hidden;">two <br> line</span></span> </div> </div> baseline (with overflow:hidden) <div class="table"> <div> <span>one line</span> <span><span style="overflow:hidden;">another line</span></span> </div> </div> top will fix all the cases <div class="table"> <div> <span style="vertical-align:top;">one line</span> <span><span>two <br> line</span></span> </div> </div> <div class="table"> <div> <span style="vertical-align:top;">one line</span> <span><span style="overflow:hidden;">two <br> line</span></span> </div> </div> <div class="table"> <div> <span style="vertical-align:top;">one line</span> <span><span style="overflow:hidden;">another line</span></span> </div> </div> <div class="table"> <div> <span style="vertical-align:top;">two<br> line</span> <span><span>two <br> line (inline-block)</span></span> </div> </div>
You can clearly see how the use of inline-block
(and overflow:hidden
) is the culprit here as it make the calculation of the baseline counter intuitive and unexpected.
I see that Temani Afif has already provided solution to your original problem. But in case if it helps you in anyway or anyone else, here is the basic structure of a table with sub-tables
Styles
<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 structure
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.