PMV msg disponibili

by barbarina

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://fonts.googleapis.com/css?family=Share+Tech+Mono"></script>
<div class="container">

  <div class="row">				
					<div class="col-md-12">
						<table class="table tableTdp">
      						<tbody class="tbodyTdp">
							<tr>
	        					<td >&nbsp;</td>
	        					<td class="tdTdpCenter">Tempo medio di percorrenza</td>
	        					<td class="tdTdpCenter">
	        						VelocitĂ  media 
						  			<i class="fa fa-info-circle" aria-hidden="true" data-toggle="tooltip" data-container="body" data-placement="right" title="" id="tooltipVel" data-original-title="calcolata sulla lunghezza di: 15,1 km"></i>
	        					</td>
	        					<td>&nbsp;</td>
      						</tr>
							<tr>
	        					<td >Riferimento</td>
	        					<td id="tdp" class="cellaTdp cellaAutotraf">11'20''</td>
	        					<td id="velMed" class="cellaTdp cellaAutotraf">80.0 km/h</td>
	        					<td rowspan="2" id="statoAttuale" class="col-sm-3 align-self-center cellaTdpDoppia cella0000FF">Non definito</td>
      						</tr>
      						
      						<tr>
	        					<td >
	        						Attuale 
						          	<i class="fa fa-info-circle" aria-hidden="true" data-toggle="tooltip" data-container="body" data-placement="right" title="" id="tooltipTempo" data-original-title="dato delle 12:25"></i>
	        					</td>
	        					<td id="tdpAttuale" class="col-sm-4 cellaTdp cellaND">0'0''</td>
	        					<td id="velMedAttuale" class="col-sm-4 cellaTdp cellaND">0.0 km/h</td>
      						</tr>
							</tbody>
						</table>
						
					</div>
					
				</div>

</div><!--container-->

CSS

:root {
    --autotraf:#c6dec6;
    --tdp19:#BF360C;
    --tdp2040:#E65100;
    --tdp4060:#FF9800;
    --tdp6080:#FFB300;
    --tdp80100:#FFD600;
    --tdp100120:#689F38;
    --tdp121:#4CAF50;
    --tdp0000FF:#337ab7;
    --tdpE07474:#E07474;
    --tdpFFFF00:#FFFF00;
    --tdpEAEBA9:#EAEBA9;
    --tdp8BFEFE:#8BFEFE;
    --tdp59BF60:#59BF60;
    --tdp008000:#008000;    
}

.tableTdp{
  font-weight: bolder; 
  font-size: smaller; 
  width: 80%; 
  margin: auto; 
  float: none; 
  margin-bottom: 15px; 
  margin-top: 15px;
}

.tbodyTdp{
  overflow: unset; 
  width: auto;
}

.tableTdp>tbody>tr>td{
  border: none;  
}

.tdTdpCenter{
   text-align: center;
}

.cellaTdp{
  padding: 5px 0px;
	font-weight: normal;
  border-radius: 5px 5px 5px 5px;
  text-align: center;
}

.cellaTdpDoppia{
  vertical-align:middle !important;  
    padding: 10px;
    border-radius: 5px 5px 5px 5px;
    text-align: center;
}

.cellaAutotraf{
    background-color: var(--autotraf);
}
.cella0000FF,.cellaND{
  background-color: var(--tdp0000FF);
	color: white;
}

.cella19{	
    background-color: var(--tdp19);
	color: white;
}

.cella2040{
    background-color: var(--tdp2040);
	color: white;
}

.cella4060{	
    background-color: var(--tdp4060);
	color: white;
}

.cella6080{
    background-color: var(--tdp6080);
	color: white;
}

.cella80100{	
    background-color: var(--tdp80100);
}

.cella100120{	
    background-color: var(--tdp100120);
	color: white;
}

.cella121{
    background-color: var(--tdp121);
	color: white;
}

.cellaE07474{
    background-color: var(--tdp07474);
	color: white;
}
.cellaFFFF00{
    background-color: var(--tdpFFFF00);
}
.cellaEAEBA9{
    background-color: var(--tdpEAEBA9);
}
.cella8BFEFE{
    background-color: var(--tdp8BFEFE);
	color: white;
}
.cella59BF60{
    background-color: var(--tdp59BF60);
	color: white;
}
.cella008000{
    background-color: var(--tdp008000);
	color: white;
}