reducir codigo

[oscar2h]

saludos a todos, me interesaria saber como puedo reducir mas un codigo, aka les dejo mi codigo, a ver si se puede, gracias de antemano

Código PHP:

  <style type="text/css"> 
 
#tabla_detalle{ 
width:569px; 
border:solid 1px #CCCCCC; 
border-collapse:collapse; 
background:#FFFFFF; 
 
} 
 
.superior{ 
background-color:#0000FF; 
text-align:center; 
} 
 
.cell1{ 
width:50px; 
border-left:solid 2px #CCCCCC; 
border-right:solid 2px #CCCCCC; 
border-top: solid 2px #CCCCCC; 
border-bottom: solid 2px #CCCCCC; 
 
 
} 
 
 
.cell2{ 
border-left:solid 2px #CCCCCC; 
border-right:solid 2px #CCCCCC; 
border-top: solid 2px #CCCCCC; 
border-bottom: solid 2px #CCCCCC; 
width:400px; 
 
} 
 
</style> 
 
<table id="tabla_detalle"> 
 
<tr class="superior"> 
 
    <td class="cell1">N</td> 
    <td class="cell2">Producto</td> 
    <td class="cell1">Precio uni.</td> 
    <td class="cell1">Cant.</td> 
    <td class="cell1">Total</td> 
</tr> 
 
    <td class="cell1">1</td> 
    <td class="cell2">Pan</td> 
    <td class="cell1">500</td> 
    <td class="cell1">1</td> 
    <td class="cell1">500</td> 
<tr> 
 
    <td class="cell1">2</td> 
    <td class="cell2">Bebida</td> 
    <td class="cell1">800</td> 
    <td class="cell1">2</td> 
    <td class="cell1">1600</td> 
</tr> 
 
</table>  
   

[willyfc]

pues al css se lo podría dejar así:

Código:

<style type="text/css"> 
#tabla_detalle{ width:569px; border:solid 1px #CCCCCC; border-collapse:collapse; background-color:#FFF; } 
.superior{ background-color:#0000FF; text-align:center; } 
.cell1{ width:50px;border:2px solid #CCC;} 
.cell2{ border:2px solid #CCC;width:400px;} 
</style>

no veo más donde, mira, hay cosas en la que puedes ahorrar lineas de código como el border, si el borde es igual a los 4 lados pues es una sola línea como te coloque arriba.

también con margin y padding puedes hacer lo mismo:

Código:

.estilo{
	padding-top:10px;padding-right:30px;padding-bottom:40px;padding-left:20px;/*Así no*/
	padding:10px 30px 40px 20px;/*Así si en el mismo orden que esta arriba*/
	padding:10px;/*Si todos los lados son iguales*/
}

y lo mismo con el margin.

[ArturoGallegos]

edito: willyfc perdona repeti lo mismo eso me pasa por esperar tanto en presionar guardar jajaja ni modo

agrupa estas propiedades:

Código HTML:

.cell1{
width:50px;
border-left:solid 2px #CCCCCC;
border-right:solid 2px #CCCCCC;
border-top: solid 2px #CCCCCC;
border-bottom: solid 2px #CCCCCC;


}


.cell2{
border-left:solid 2px #CCCCCC;
border-right:solid 2px #CCCCCC;
border-top: solid 2px #CCCCCC;
border-bottom: solid 2px #CCCCCC;
width:400px;

}

son repetitivas y dejas mucho espacio libre que relentiza pon algo así

Código HTML:

.cell1{width:50px;}
.cell2{width:400px;}
.cell1, .cell2{border:2px #CCCCCC solid;}

el usar un renglón para cada propiedad es solo para guiarte tu mismo pero para un explorador no importa si lo dejas todo en una sola linea o lo separas
así que te recomiendo no dejes espacios y si los dejas que sean lo menos posible

[oscar2h]

gracias por las respuestas, las tomare en cuenta