6
Ho una tabella reattivo in twitter-bootstrap e voglio sapere se è possibile aggiungere la linea centrato nella parte inferiore della "numberCircle" come nell'immagine:Aggiungi linea verticale al css fondo
Grazie
.numberCircle {
border-radius: 50%;
width: 50px;
height: 50px;
background: rgba(177, 207, 219, 1);
color: white;
text-align: center;
line-height: 50px;
font-weight: 600;
font-size: 16px;
margin: 10px 0;
}
<table class="col-md-12 table-condensed cf">
<tbody>
<tr>
<td style="width: 50%; vertical-align: top;">
<div class="title">Title Content</div>
<div class="content">
Quisque porta pulvinar urna, at maximus sapien efficitur ac. Suspendisse tristique blandit tortor eget congue. Nulla sed aliquet enim. Ut quis massa auctor, feugiat dui ut, molestie mi. Ut congue metus ac neque vestibulum, et pharetra neque mattis. Suspendisse
sed purus commodo, sagittis justo non, pretium diam.
</div>
</td>
<td class="text-center" style="width: 50%; vertical-align: top;">
<div class="numberCircle">1</div>
</td>
</tr>
</tbody>
</table>
Se ti piace utilizzare per jQuery: aggiungi ' all'elemento numberCircle "e modificare selettore CSS. –
Un piccolo bug, puoi allineare il numero in alto e rendere la linea di fondo 100% di altezza? significa mettere il tag td vertical-align: top; e la linea per avere la piena altezza – Robert
Puoi farlo con un approccio diverso https://jsfiddle.net/Lg0wyt9u/562/ –