¿Cómo arreglar la fila del título en una tabla usando CSS?[cerrado]

StackOverflow https://stackoverflow.com//questions/20046174

  •  26-12-2019
  •  | 
  •  

Pregunta

Hice una tabla sin bordes en las columnas y puse un borde de 1 px solo en las filas.

Utilicé la propiedad 'borde colapsado' y luego le di a todas las filas un borde de 1 px.

Sin embargo, mi problema es que la fila de titulares es un poco más larga que el resto de la tabla.

¿Alguien sabe cómo puedo solucionarlo?

Gracias de antemano.

código HTML: 

<!DOCTYPE html>
<html>
<title>web programming project 2</title>
<link rel="stylesheet" type="text/css" href="exe2CSS1.css">
<body>


<table class=outlined>
<tr id=headline>
<th class=side>Item</th>
<th class=side>Manufacturer</th>
<th class=side>Size</th>
<th class=center>Unit Price</th>
<th class=center>Quantity</th>
<th class=center>Total Price</th>
</tr>

<tr  class=firstCol>
<td class=side>Corn Flakes</td>
<td class=side>Kellogg's</td>
<td class=side>18 0z</td>
<td class=center>2.5</td>
<td class=center>1</td>
<td class=center>2.5</td>
</tr>


<tr class=secondCol>
<td class=side>Solid White Tuna</td>
<td class=side>Starkist</td>
<td class=side>5 oz</td>
<td class=center>2.79</td>
<td class=center>2</td>
<td class=center>5.58</td>
</tr>


</table>

</body>
</html>

código css:

.outlined
{
font:13px Tahoma;
width: 75%;
border-collapse: collapse;
}

tr {
border: 1px solid white;
}

.secondCol{
background-color: #eeeff2
}

.firstCol{
background-color: #dfe1e7
}

.center{
text-align: center;
}

.side{
text-align: left
}

#headline{
background-color: #687291;
color: white;
}
¿Fue útil?

Solución

Le faltan comillas alrededor del valor de los atributos y se perdió un cierre </th> en la primera fila para "Precio total" (tiene un <th> en cambio)

Demostración de jsFiddle

<tr id="headline">
    <th class="side">Item</th>
    <th class="side">Manufacturer</th>
    <th class="side">Size</th>
    <th class="center">Unit Price</th>
    <th class="center">Quantity</th>
    <th class="center">Total Price</th>
</tr>

Otros consejos

Hola, tu última etiqueta no está cerrada correctamente "<th class=center>Total Price<th>"

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top