Estoy usando esta tabla para mostrar un resumen de los datos de mi tabla.

El problema: cuando muestro el div class="mpst", este div no puede llegar al final de mi tabla cuando hay una diferencia entre el número de líneas en el texto.

El código:

.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>

¿Alguien aquí que sepa cómo puedo hacer eso?

¡Gracias!

0
Zeca Novaes 18 oct. 2017 a las 17:03

3 respuestas

La mejor respuesta

Como usa una tabla, la alineación vertical está disponible para centrar verticalmente el contenido en cada 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>
1
G-Cyrillus 18 oct. 2017 a las 14:12

Debe agregar vertical-align: bottom a sus elementos td:

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

Mdn

0
Alex W 18 oct. 2017 a las 14:11

Su código tiene muchos errores ... Traté de limpiarlo un poco ...

.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>
0
DaFois 18 oct. 2017 a las 14:18