The Table-cell property in CSS uses an instance

Let's look at table below, why is the table layout that used to be so brilliant in those years? What are the characteristics of her? Discard table compatibility, SEO, loading and so on, not related to this article, just look at the attributes, then two features:

1. Peers and other high.
2. Automatic width adjustment.
So does Table-cell have this trait? The answer is yes, why? There is an interesting rule in CSS for "creating anonymous table elements." Take Table-cell to pull, that is, when an element is set to Display:table-cell, if her parent node is not Display:table-row, Grandpa node is not display:table, then the following is the time to witness miracles, The son gave birth to his father and grandfather (the browser will automatically create two anonymous box objects) although you can not find your father and grandfather, but this really happened, it is really incredible things, where incredible, without applause the most incredible. ^_^
So here are a few things to look at and help us understand this incredible thing. Let me write the following code:

<style type= "Text/css" >       p{padding:10px 0;}       . CLASSTD,       td{height:34px; padding:10px; margin:10px; border:1px solid #ccc; vertical-align:middle;}       . Classtd{display:table-cell; Border-color: #cc0;}   </style>   <p class= "classtd" >tom</p>   <p class= "classtd" >jack</p>   <p > General p</p>   <p class= "classtd" >angel</p>   <p>======= above is p below is table ========</p >   <table cellpadding= "0" cellspacing= "0" >       <tr>           <td class= "DTC" >tom</td>           <td class= "DTC" >jack</td>       </tr>   </table>   <table style= " margin-top:10px; "cellpadding=" 0 "cellspacing=" 0 ">       <tr>           <td>angel</td>       </ Tr>   </table>

Then I predict that the browser appears as follows:

Well, I admit I looked at the effect first, and then I could conclude: Tom and Jack had a father and a grandfather (the browser creates a table to wrap the adjacent Display:table-cell elements) and behaves the same as the first table. Angel himself gave birth to the father and grandfather performed the same as the second table.
Since this is the case, then want to understand Table-cell, is disguised to understand the form of TD. Then back to the previous two features: Peer high, width automatic adjustment.
Since this is the case, then we can take the goods for the high-level layout:

<style type= "Text/css" >       . classtd{padding:10px; margin:10px; border:1px solid #ccc; vertical-align:top;}       . Classtd{display:table-cell; Border-color: #cc0;}   </style>   <p class= "CLASSTD" >       <p> Adult. <br/> Actually I think we don't ask Yuan Fang, Yuan Fang is not God-man, <br/> will not martial arts, maybe a retarded, <br/> I don't believe I am here Heihuanfang <br/> He will suddenly feiyanzoubi come to me <br/ > Press my head on the keyboard to yu7jhklhgjkfgt;/. Yujh bnujm798u7jrtb5 tq1qwsewrt5    </p></p><p class= "classtd" ><p> me and left high </p></p >

Using the column width to automatically adjust this feature can be left fixed right adaptive layout:

<style type= "Text/css" >. left{float:left; width:260px; padding:10px; margin-right:10px; border:1px       Solid # CCC;}       . classtd{Display:table-cell; width:3000px; padding:10px; border:1px solid #ccc;}   </style>   <p class= "left" > I am on the right side </p>   <p class= "CLASSTD" > I am Adaptive       to the   </p >

Get this stuff together with the vertical-align:middle. You can make a vertical center layout (with multiple lines of text centered vertically) of an element that is not fixed in size:

<style type= "Text/css" >       . classtd{display:table-cell; padding:10px;margin:10px;border:1px solid #ccc;}       . CLASSTD p{display:inline-block; vertical-align:middle;}   </style>   <p class= "CLASSTD" >       <p style= "padding:40px 80px 10px 10px; background: #639146; color: #fff; " >p+css</p>       <p style= "padding:60px 80px 10px 10px background: #2B82EE; color: #fff;" >javascript</p>       <p style= "padding:70px 80px 10px 10px background: #F57900; color: #fff;" >HTML5</p>       <p style= "padding:80px 80px 10px 10px background: #BC1D49; color: #fff;" >CSS3</p>   </p>

Using the column width to automatically adjust this feature can be left fixed right adaptive layout:

<style type= "Text/css" >. left{float:left; width:260px; padding:10px; margin-right:10px; border:1px       Solid # CCC;}       . classtd{Display:table-cell; width:3000px; padding:10px; border:1px solid #ccc;}   </style>   <p class= "left" > I am on the right side </p>   <p class= "CLASSTD" > I am Adaptive       to the   </p >

Having children's shoes may confuse the width:3000px in this layout. So the following is the principle of this layout:
the Display:table-cell element generates the anonymous table default Table-layout:auto. The width is automatically adjusted based on the contents of the cell. so the purpose of setting width:3000px is as wide as possible meaning. This allows for an adaptive effect to be achieved.