CODEWITHSUNDEEP
htmlcss
Zeca Novaes
Zeca Novaes

Reputation: 419

Positioning div on table bottom

I'm using this table to show a summary of my table data.

The problem: When I show the div class="mpst", this div can't reach the bottom of my table when there is difference between the number of lines in text.

The code:

.resumo tr {
    color: #253037;
    background-color:#e9e9e9;
}
.resumo table  {
    flex-wrap: nowrap; align-items: center;
    width: calc(90% + 4vh); 
    border-collapse: collapse; 
    margin:0 auto;
    text-align:center;	
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 2vh 0;
    vertical-align: baseline;
    border:0;
    outline: 0;
}
.resumo td {
    font-size: 13px;
    padding:0;
    outline: 0;
}
.tbpad {
    padding-top:4vh;
    padding-left:2vh;
    padding-right:2vh;
}
.mpst {
    background-color:black;
    width:calc(94%);
    padding:3%;
    margin-top:4vh;
    margin-left:0;
    position:relative;
    color:#ffffff;
    outline: 0;
}
.stgreen {
    background-color: #33CA49; 
}
.styellow {
    background-color: #FDBD41; 
}
td img {
    max-width:70%;
    height:auto;
    vertical-align: middle;
    margin-bottom:5%;
}
<div class="resumo"> <table id="statuscp"><tbody><tr><td class="status"> <div class="tbpad"><img src="resources/img/transm.png"><p class="pblock">Transm</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/command.jpg"><p class="pblock">Final <br>command LD</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/command.jpg"><p class="pblock">Final <br>command LE</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/engine.jpg"><p class="pblock">Engine</p></div><div class="mpst stgreen">MN &gt; 1K</div></td> </tr></tbody></table></div>

Anyone here who knows how can I do that?

Thanks!

Upvotes: 0

Views: 41

Answers (3)

DaFois
DaFois

Reputation: 2223

your code has many errors... I tried to clean it a little...

.resumo tr {
    color: #253037;
    background-color:#e9e9e9;
}
.resumo table  {
    width: calc(90% + 4vh); 
    margin:0 auto;
    text-align:center;	
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 2vh 0;
    border:0;
    outline: 0;
}
.resumo td {
    font-size: 13px;
    padding:0;
    outline: 0;
    position:relative;
    height:120px;
    vertical-align:top;
    padding-top: 30px
}
.tbpad {
    padding-left:2vh;
    padding-right:2vh;
}
.mpst {
    background-color:black;
    width:calc(94%);
    padding:3%;
    margin-top:4vh;
    margin-left:0;
    position:absolute;
    bottom:0;
    color:#ffffff;
    outline: 0;
}
.stgreen {
    background-color: #33CA49; 
}
.styellow {
    background-color: #FDBD41; 
}
td img {
    max-width:70%;
    height:auto;
    margin-bottom:5%;
}
<div class="resumo"> <table id="statuscp"><tbody><tr><td class="status"> <div class="tbpad"><img src="resources/img/transm.png"><p class="pblock">Transm</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/command.jpg"><p class="pblock">Final <br>command LD</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/command.jpg"><p class="pblock">Final <br>command LE</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/engine.jpg"><p class="pblock">Engine</p></div><div class="mpst stgreen">MN &gt; 1K</div></td> </tr></tbody></table></div>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105943

Since you use a table, vertical-align is avalaible to vertically center content in each tds :

.resumo td {
    font-size: 13px;
    padding:0;
    outline: 0;
    vertical-align:bottom; /* <=== here , align content to bottom */
}


.resumo tr {
    color: #253037;
    background-color:#e9e9e9;
}
.resumo table  {
    flex-wrap: nowrap; align-items: center;
    width: calc(90% + 4vh); 
    border-collapse: collapse; 
    margin:0 auto;
    text-align:center;	
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 2vh 0;
    vertical-align: baseline;
    border:0;
    outline: 0;
}
.resumo td {
    font-size: 13px;
    padding:0;
    outline: 0;
    vertical-align:bottom;
}
.tbpad {
    padding-top:4vh;
    padding-left:2vh;
    padding-right:2vh;
}
.mpst {
    background-color:black;
    width:calc(94%);
    padding:3%;
    margin-top:4vh;
    margin-left:0;
    position:relative;
    color:#ffffff;
    outline: 0;
}
.stgreen {
    background-color: #33CA49; 
}
.styellow {
    background-color: #FDBD41; 
}
td img {
    max-width:70%;
    height:auto;
    vertical-align: middle;
    margin-bottom:5%;
}
<div class="resumo"> <table id="statuscp"><tbody><tr><td class="status"> <div class="tbpad"><img src="resources/img/transm.png"><p class="pblock">Transm</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/command.jpg"><p class="pblock">Final <br>command LD</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/command.jpg"><p class="pblock">Final <br>command LE</p></div><div class="mpst styellow">MP &gt; 1K</div></td> <td class="status "> <div class="tbpad"><img src="resources/img/engine.jpg"><p class="pblock">Engine</p></div><div class="mpst stgreen">MN &gt; 1K</div></td> </tr></tbody></table></div>

Upvotes: 1

Alex W
Alex W

Reputation: 38223

You need to add vertical-align: bottom to your td elements:

.resumo td {
    font-size: 13px;
    padding:0;
    outline: 0;
    vertical-align: bottom;
}

MDN

Upvotes: 0

Related Questions