在绝对定位的桌子中不考虑高度

Question

If an absolutely positioned element with display: table has height explicitly set, if content height is larger than provided height value, then the element will shrink wrap the content and not consider the height value.

 #main { width: 100px; height: 29px; position: absolute; top: 20px; left: 200px; border: 1px red dashed; display: table; table-layout: fixed; border-spacing: 0; border-collapse: separate; } #child { display: table-cell; } 

 <div id="main"> <div id="child">Custom Text With Validation:</div> </div> 

Answer 1

It is the table cell that doesn't honor its parent's height for the same reason i doesn't honor max-height , hence pushing the table's size.

Here is 2 ways to make this to work, either set position: absolute on the child

 #main { width: 100px; height: 29px; position: absolute; top: 20px; left: 200px; border: 1px red dashed; display: table; table-layout: fixed; border-spacing: 0; border-collapse: separate; } #child { position: absolute; display: table-cell; } 

 <div id="main"> <div id="child">Custom Text With Validation: </div> </div> 

or add an extra element inside the child and set the height on that.

 #main { width: 100px; height: 29px; position: absolute; top: 20px; left: 200px; border: 1px red dashed; display: table; table-layout: fixed; border-spacing: 0; border-collapse: separate; } #child { display: table-cell; } #child div { height: 29px; } 

 <div id="main"> <div id="child"> <div>Custom Text With Validation:</div> </div> </div> 

---

Adding overflow: hidden on the table will also properly "cut" of the excess.