HTML - Tabla con bordes adecuados

 
Vista:
sin imagen de perfil

Tabla con bordes adecuados

Publicado por sandra (8 intervenciones) el 19/04/2017 10:33:59
Buenas, tengo una tabla pero necesito que aparezcan solo ciertos bordes, la línea debajo de la primera fila en horizontal y todas las verticales pero no lo consigo.

la table es
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table id="tabla">
	<thead>
		<tr>
		  <td id="cantidad">Cantidad</td>
		  <td id="concepto">Concepto</td>
		  <td id="pvp">PVP/Ud</td>
		  <td id="importe">Importe</td>
		</tr>
	</thead>
	<tbody>
		<tr class="vacio">
			<td colspan="1" rowspan="9">&nbsp;</td>
			<td colspan="1" rowspan="8">&nbsp;</td>
			<td colspan="1" rowspan="9">&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr class="vacio">
			<td></td>
		</tr>
		<tr>
		  <td id="gracias">Gracias por su visita</td>
		  <td class="vacio"></td>
		</tr>
	</tbody>
</table>

Y el css que funciona
1
2
3
4
5
6
7
8
#tabla {
	text-align:center;
	margin-right: auto;
	empty-cells: show;
	width:100%;
	//border-collapse: collapse;
	//border-spacing: 0;
}

Lo que he probado
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#tabla th,
#tabla td {
	border: 1px solid grey;
}
#tabla th:first-child td {  primera fila 
	border-top: none;
	border-bottom:1px solid grey;
}
#tabla th:last-child td {  ultima fila 
	border-bottom: none;
 
}
#tabla th:first-child,
#tabla td:first-child {  primera columna 
	border-left: none;
	border-bottom:none;
}
#tabla th:last-child,
#tabla td:last-child { /ultima columna 
	border-right: none;
	border-top: none;
	border-bottom: none;
 
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 1.060
Oro
Ha disminuido 1 puesto en HTML (en relación al último mes)
Gráfica de HTML

Tabla con bordes adecuados

Publicado por xve (1541 intervenciones) el 19/04/2017 17:06:04
Hola Sandra, haber si te sirve este código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<style>
#tabla {
	text-align:center;
	margin-right: auto;
	empty-cells: show;
	width:100%;
}
 
#tabla thead tr td {
	border-top: none;
	border-bottom:1px solid grey;
}
 
#tabla td {
	border-right:1px solid;
}
#tabla tr:first-child td:first-child {
	border-left:1px solid;
}
</style>
 
<table id="tabla">
	<thead>
		<tr>
		  <td id="cantidad">Cantidad</td>
		  <td id="concepto">Concepto</td>
		  <td id="pvp">PVP/Ud</td>
		  <td id="importe">Importe</td>
		</tr>
	</thead>
	<tbody>
		<tr class="vacio">
			<td colspan="1" rowspan="9">&nbsp;</td>
			<td colspan="1" rowspan="8">&nbsp;</td>
			<td colspan="1" rowspan="9">&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr class="vacio">
			<td></td>
		</tr>
		<tr>
		  <td id="gracias">Gracias por su visita</td>
		  <td class="vacio"></td>
		</tr>
	</tbody>
</table>

Pone borde inferior en el titulo, y en las verticales... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar