Tablas en HTML

[senseeye3led]

Quiero hacer una tabla en el que en una fila al final tenga un botón. [OK]

Código HTML:

<tr><th>Ciudad</th><th>Nombre</th><th>Teléfono</th><th>Horario</th><th>+ Info</th></tr>
<tr>
<td>'+data[i].ciudad+'</td>
<td><a href="'+data[i].url+' "target="_blank">'+data[i].nombre+'</a></td>
<td>'+data[i].telf+'</td><td>'+data[i].horario+'</td>
<td><button onclick="mas('+i+')" id="'+b+'" title="+">+</button>
 

Tras pulsar al botón ejecuto la función JS mas()

Contenido a mostrar tras pulsar el botón. (A un futuro es posible que se quieran anyadir más filas).

Código HTML:

<tr class="masOFF" id="'+i+'">
<td colspan="2"><b>GPS:</b></td>
<td>'+data[i].lat+','+data[i].long+'</td>
<td colspan="2"><b>Id:</b></td>
<td>'+data[i].id+'</td>
</tr>
 

Código CSS para masOFF:

Código CSS:

.masOFF{
      display: none;
      column-span: all;
}
.masOFF tr{
      display: block;
      background:#e31839;
}
.masOFF td{
      display: block;
      background:#f6ff21; /* amarillo */
}
 

Funciona y al pulsar el botón me muestra la información sobre un recuadro amarillo, pero el problema que tengo es que el tamaño de ese recuadro amarillo, se genera en función de la largura del contenido.

Desearia que fuera algo fijo, por ejemplo un % de pantalla.