如何使文本对齐到CSS表格单元格的顶部

Question

I have the the html table like here

  .table { margin: 0 0 40px 0; width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); display: table; } @media screen and (max-width: 580px) { .table { display: block; } } .row { display: table-row; background: #f6f6f6; } .row:nth-of-type(odd) { background: #e9e9e9; } .row.header { font-weight: 900; color: #ffffff; background: #ea6153; } .row.green { background: #27ae60; } .row.blue { background: #2980b9; } @media screen and (max-width: 580px) { .row { padding: 8px 0; display: block; } } .cell { padding: 6px 6px; display: table-cell; line-height: 1.2em; } @media screen and (max-width: 580px) { .cell { padding: 2px 12px; display: block; } } 

 <div class="table"> <div class="row header green"> <div class="cell"> </div> <div class="cell"> Name </div> <div class="cell"> Id </div> <div class="cell"> Author </div> <div class="cell"> Price </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/P0aVrLO7Wxob0dIBx80m85wUyHFiK3-Xw7Xw_6CDFAogdeoRR0YWnSjkFNOR4M7nIA=w340" width="50" height="50"> </div> <div class="cell"> <h1>Flightradar24 - Flight Tracker</h1> <span>com.flightradar24pro</span> </div> <div class="cell"> com.flightradar24pro </div> <div class="cell"> Flightradar24 AB </div> <div class="cell"> $3.99 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/JXJb3299C15MfJGA0wWoNCq-qNdNOuTXLuvd8mg0Wa3VRTPIDlPMfmUZK-Sn8WLiPz0=w340" width="50" height="50"> </div> <div class="cell"> <h1>WatchMaker Premium Watch Face</h1> <span>slide.watchFrenzy.premium</span> </div> <div class="cell"> slide.watchFrenzy.premium </div> <div class="cell"> androidslide </div> <div class="cell"> $3.99 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.ggpht.com/a125TbrsUMdstTX1UQDPlrIQkFphGp9SQpT30sE8vsEkBj33YulEgaeN8rmmgL5ngk0=w340" width="50" height="50"> </div> <div class="cell"> <h1>Ski Tracks</h1> <span>com.corecoders.skitracks</span> </div> <div class="cell"> com.corecoders.skitracks </div> <div class="cell"> Core Coders Ltd </div> <div class="cell"> $0.99 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/WcL0Crw46EJubniXfwCZbVgO7JF9ToVjVjPwlqCqZOhLWtrp8mGjaoh865ZXdhiG1A=w340" width="50" height="50"> </div> <div class="cell"> <h1>Weather Timeline - Forecast</h1> <span>com.samruston.weather</span> </div> <div class="cell"> com.samruston.weather </div> <div class="cell"> Sam Ruston </div> <div class="cell"> $1.49 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/dsQKC-6sq0rJZX3I1N5ivpU3fS8s-mokRlZnV8gDI9tIdt523j2df8AwwMHVGkvG76Q=w340" width="50" height="50"> </div> <div class="cell"> <h1>Unified Remote Full</h1> <span>com.Relmtech.RemotePaid</span> </div> <div class="cell"> com.Relmtech.RemotePaid </div> <div class="cell"> Unified Intents </div> <div class="cell"> $0.99 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh5.ggpht.com/YmbOfBlKGDy7K39ngf5m0vrXG8gK-gCORC1ybbtMVJa63MX1SPjtxi4jMQmRrcazgw=w340" width="50" height="50"> </div> <div class="cell"> <h1>NOAA Weather Unofficial (Pro)</h1> <span>com.nstudio.weatherhere</span> </div> <div class="cell"> com.nstudio.weatherhere </div> <div class="cell"> Granite Apps </div> <div class="cell"> $1.99 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/HB1NQpjlT21nGLFXCc5lLHXqtft9CHNq8nLW16DDJF_d61_9CVYbEuRfrYGfIXI8V2Y=w340" width="50" height="50"> </div> <div class="cell"> <h1>Password Manager SafeInCloud™</h1> <span>com.safeincloud</span> </div> <div class="cell"> com.safeincloud </div> <div class="cell"> SafeInCloud </div> <div class="cell"> $2.99 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/twhd0ckGPSETQH7TDkiYvrJr-FKQ-YP1Bll1_-Dk-1Bx4YdJJ1HwinVhHk6uy_YYEe8=w340" width="50" height="50"> </div> <div class="cell"> <h1>Talon for Twitter</h1> <span>com.klinker.android.twitter_l</span> </div> <div class="cell"> com.klinker.android.twitter_l </div> <div class="cell"> Luke Klinker </div> <div class="cell"> $1.49 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/UgItAs4ckdGHTXTVWNQ0NNrWy9rh6ya4BrjwAUPMsgMpwOI2NQ7N0zvfQ8eyb78NzHE=w340" width="50" height="50"> </div> <div class="cell"> <h1>Watch Face - Minimal &amp; Elegant</h1> <span>com.stmp.minimalface</span> </div> <div class="cell"> com.stmp.minimalface </div> <div class="cell"> Studio eXtreme </div> <div class="cell"> $1.59 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/OZQhEH8B9PNGPkOlx714tIK0mEjMBHUEoJdb2bqUY01i9SKh8iI66j9RMRRzYCvKpYc=w340" width="50" height="50"> </div> <div class="cell"> <h1>Weather Live</h1> <span>com.apalon.weatherlive</span> </div> <div class="cell"> com.apalon.weatherlive </div> <div class="cell"> Apalon Apps </div> <div class="cell"> $0.99 </div> </div> </div> 

And then detail css like here :

The problem i got was when I combine the cell with the image the result table would like this picture :

So how to make the text to align in top? so the red area would be clear. Thanks

The js fiddle detail you can see this link html table jsfiddle

Answer 1

use vertical-align:top

.cell {
   padding: 6px 6px;
   display: table-cell;
   line-height: 1.2em;
   vertical-align:top;
}
.cell h1 {
   margin-top:4px;
}

check with the fiddle

https://jsfiddle.net/bc7rf85k/4/

Answer 2

 .table { margin: 0 0 40px 0; width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); display: table; } @media screen and (max-width: 580px) { .table { display: block; } } .row { display: table-row; background: #f6f6f6; } .row:nth-of-type(odd) { background: #e9e9e9; } .row.header { font-weight: 900; color: #ffffff; background: #ea6153; } .row.green { background: #27ae60; } .row.blue { background: #2980b9; } @media screen and (max-width: 580px) { .row { padding: 8px 0; display: block; } } .cell { padding: 6px 6px; display: table-cell; line-height: 1.2em; vertical-align:top; } .cell h1 { margin-top:4px; } @media screen and (max-width: 580px) { .cell { padding: 2px 12px; display: block; } } 

 <div class="table"> <div class="row header green"> <div class="cell"> </div> <div class="cell"> Name </div> <div class="cell"> Id </div> <div class="cell"> Author </div> <div class="cell"> Price </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/P0aVrLO7Wxob0dIBx80m85wUyHFiK3-Xw7Xw_6CDFAogdeoRR0YWnSjkFNOR4M7nIA=w340" width="50" height="50"> </div> <div class="cell"> <h1>Flightradar24 - Flight Tracker</h1> <span>com.flightradar24pro</span> </div> <div class="cell"> com.flightradar24pro </div> <div class="cell"> Flightradar24 AB </div> <div class="cell"> $3.99 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/JXJb3299C15MfJGA0wWoNCq-qNdNOuTXLuvd8mg0Wa3VRTPIDlPMfmUZK-Sn8WLiPz0=w340" width="50" height="50"> </div> <div class="cell"> <h1>WatchMaker Premium Watch Face</h1> <span>slide.watchFrenzy.premium</span> </div> <div class="cell"> slide.watchFrenzy.premium </div> <div class="cell"> androidslide </div> <div class="cell"> $3.99 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.ggpht.com/a125TbrsUMdstTX1UQDPlrIQkFphGp9SQpT30sE8vsEkBj33YulEgaeN8rmmgL5ngk0=w340" width="50" height="50"> </div> <div class="cell"> <h1>Ski Tracks</h1> <span>com.corecoders.skitracks</span> </div> <div class="cell"> com.corecoders.skitracks </div> <div class="cell"> Core Coders Ltd </div> <div class="cell"> $0.99 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/WcL0Crw46EJubniXfwCZbVgO7JF9ToVjVjPwlqCqZOhLWtrp8mGjaoh865ZXdhiG1A=w340" width="50" height="50"> </div> <div class="cell"> <h1>Weather Timeline - Forecast</h1> <span>com.samruston.weather</span> </div> <div class="cell"> com.samruston.weather </div> <div class="cell"> Sam Ruston </div> <div class="cell"> $1.49 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/dsQKC-6sq0rJZX3I1N5ivpU3fS8s-mokRlZnV8gDI9tIdt523j2df8AwwMHVGkvG76Q=w340" width="50" height="50"> </div> <div class="cell"> <h1>Unified Remote Full</h1> <span>com.Relmtech.RemotePaid</span> </div> <div class="cell"> com.Relmtech.RemotePaid </div> <div class="cell"> Unified Intents </div> <div class="cell"> $0.99 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh5.ggpht.com/YmbOfBlKGDy7K39ngf5m0vrXG8gK-gCORC1ybbtMVJa63MX1SPjtxi4jMQmRrcazgw=w340" width="50" height="50"> </div> <div class="cell"> <h1>NOAA Weather Unofficial (Pro)</h1> <span>com.nstudio.weatherhere</span> </div> <div class="cell"> com.nstudio.weatherhere </div> <div class="cell"> Granite Apps </div> <div class="cell"> $1.99 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/HB1NQpjlT21nGLFXCc5lLHXqtft9CHNq8nLW16DDJF_d61_9CVYbEuRfrYGfIXI8V2Y=w340" width="50" height="50"> </div> <div class="cell"> <h1>Password Manager SafeInCloud™</h1> <span>com.safeincloud</span> </div> <div class="cell"> com.safeincloud </div> <div class="cell"> SafeInCloud </div> <div class="cell"> $2.99 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/twhd0ckGPSETQH7TDkiYvrJr-FKQ-YP1Bll1_-Dk-1Bx4YdJJ1HwinVhHk6uy_YYEe8=w340" width="50" height="50"> </div> <div class="cell"> <h1>Talon for Twitter</h1> <span>com.klinker.android.twitter_l</span> </div> <div class="cell"> com.klinker.android.twitter_l </div> <div class="cell"> Luke Klinker </div> <div class="cell"> $1.49 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/UgItAs4ckdGHTXTVWNQ0NNrWy9rh6ya4BrjwAUPMsgMpwOI2NQ7N0zvfQ8eyb78NzHE=w340" width="50" height="50"> </div> <div class="cell"> <h1>Watch Face - Minimal &amp; Elegant</h1> <span>com.stmp.minimalface</span> </div> <div class="cell"> com.stmp.minimalface </div> <div class="cell"> Studio eXtreme </div> <div class="cell"> $1.59 </div> </div> <div class="row"> <div class="cell"> <img src="https://lh3.googleusercontent.com/OZQhEH8B9PNGPkOlx714tIK0mEjMBHUEoJdb2bqUY01i9SKh8iI66j9RMRRzYCvKpYc=w340" width="50" height="50"> </div> <div class="cell"> <h1>Weather Live</h1> <span>com.apalon.weatherlive</span> </div> <div class="cell"> com.apalon.weatherlive </div> <div class="cell"> Apalon Apps </div> <div class="cell"> $0.99 </div> </div> </div>