E este espaço em branco?

Pcx89 · 31/07/2015

Hola!!, les cuento lo que me está pasando.
Tengo una sección con texto y al final una tabla, pero en la tabla me aparece una fila en blanco que no puedo quitar, me fijé con la herramienta "Inspeccionar elemento" y me aparece:

Con esa imágen todo da a entender que el problema estaría en el código. Bien, pero voy al código y los <br> no aparecen. (Me fijé 30 veces XD).
Y me pasa con los anvegadores Chrome, Firefox y Opera.

¿Alguien tiene idea que tengo que hacer? XD

El espacio en blanco es:

El código de Datagrid es:

Inserir CODE, HTML ou PHP:

				<div class="datagrid">
					<table>
						<tbody>
							<tr class="alt">
								<td><p><b>Dato1:</b></p></td>
								<td><p>x</p></td>
							</tr>
											
							<tr>
								<td><p><b>Dato2:</b></p></td>
								<td><p>x</p></td>
							</tr>
							
							<tr class="alt">
								<td><p><b>Dato3:</b></p></td>
								<td><p>x</p></td><br>
							</tr>
							
							<tr>
								<td><p><b>Dato4:</b></p></td>
								<td><p>x</p></td><br>
							</tr>
							
							<tr class="alt">
								<td><p><b>Dato5:</b></p></td>
								<td><p>x<br></p></td>
							</tr>
						</tbody>
					</table>
				</div>

Y por las dudas, el código CSS:

Inserir CODE, HTML ou PHP:

.datagrid {width: 50%; font-size: 12px; font-family: Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #A4A4A4; -webkit-border-radius: 2px; -moz-border-radius: 2px;}
.datagrid table {width: 100%; border-collapse: collapse; text-align: left;} 
.datagrid table td, 
.datagrid table th {padding-top: 2px; padding-left: 2px; padding-right: 2px; padding-bottom: 2px;}
.datagrid table tbody td {color: #00557F; border-left: 1px solid #E1EEF4; font-size: 12px; font-weight: normal;}
.datagrid table tbody .alt td {background: #E1EEf4; color: #00557F;}
.datagrid table tbody td:first-child {border-left: none;}
.datagrid table tbody tr:last-child td {border-bottom: none;}
tr {display: table-row; vertical-align: inherit; border-color: inherit;}
.term{padding-left: 4px;}

La verdad.. todo muy raro XD

Cluster · 31/07/2015

Prueba con <br />

Pcx89 · 31/07/2015

Cluster disse:
Prueba con <br />

Justamente la idea es que no tener el espacio XD. En el código no lo tengo, pero en el Inspector de elemento me aparece, es rarísimo :O

Cicklow · 01/08/2015

Pcx89 disse:
Justamente la idea es que no tener el espacio XD. En el código no lo tengo, pero en el Inspector de elemento me aparece, es rarísimo :O

mmm puede que no aparescan como <br> sino que sean saltos de linea... que editor usas? o pasame la url por PM y veo...

Cluster · 01/08/2015

Oh, ya entendi, misma pregunta que cicklow, que editor usas?, muchos editores y más aún del estilo wysiwyg agregan saltos de linea, no utilizas codepress ¿o si?

Pcx89 · 01/08/2015

cicklow disse:
mmm puede que no aparescan como <br> sino que sean saltos de linea... que editor usas? o pasame la url por PM y veo...

Cluster disse:
Oh, ya entendi, misma pregunta que cicklow, que editor usas?, muchos editores y más aún del estilo wysiwyg agregan saltos de linea, no utilizas codepress ¿o si?

No puedo pasar Link ya que es un Sitio para un cliente, entiendan XD
Ahora probé de quitar <table> </table> y si bien no quedan las filas y columnas (obvio 😛) el salto de línea tampoco aparece, supongo que es por ahí el problemilla XD

Cluster · 01/08/2015

HTML:

.datagrid table th {padding-top: 2px; padding-left: 2px; padding-right: 2px; padding-bottom: 2px;}

intenta cambiar por

HTML:

.datagrid table th {padding-top: 0px; padding-left: 2px; padding-right: 2px; padding-bottom: 0px;}

En realidad es complicado sin poder ver el sitio :devilish:

Pcx89 · 01/08/2015

Les comento que solucioné el error. 😀
Busqué sitios para generar tablas automáticamente, me encontré con HTML Table Style Generator by eli geske
Y adapté el CSS a mi Web:

Inserir CODE, HTML ou PHP:

.datagrid {width: 50%;}
.datagrid table {border-collapse: collapse; text-align: left; width: 100%;}
.datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.datagrid table td, .datagrid table th { padding: 3px 2px;}
.datagrid table tbody td {color: #00496B; font-size: 12px;font-weight: normal;}
.datagrid table tbody .alt td { background: #E1EEF4; color: #00496B; }
.datagrid table tbody td:first-child {border-left: none;}
.datagrid table tbody tr:last-child td {border-bottom: none;}

Dejo la explicación por si a alguien mas le sirve XD

Gracias por sus respuestas!

Cluster · 01/08/2015

Enhorabuena igual si mal no estoy el problema eran los padding

E este espaço em branco?

Pcx89

Cluster

Pcx89

Cicklow

Cluster

Pcx89

Cluster

Pcx89

Cluster

Tópicos similares