ayuda con codigo css

[pollo_c2]

hola amigos del foro tengo un codigo css que le da formato a una tabla, pero el problema es que todas las columnas tienen el mismo anchor, y lo que quiero es que una columna tenga un tamaño fijo del 20% de la pantalla. que le debo de modificar al codigo para optener lo antes redactado?


entonces me podrian decir como
/* CSS Document *
.demoTable {
border-spacing:1px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background-color:#E7E7E7;
color: #000000;
width:70%;
margin:auto;
}
.demoTable td, .demoTable tr, .demoTable th{
border-collapse: separate;
border-collapse: collapse;
border-spacing: 0;
}
.demoTable caption {
font-weight: bold;
background: #E0BB49 url(pix/corner.gif) no-repeat right top;
border-bottom:2px solid #1975d7;
color: #FFF;
text-transform:uppercase;
padding:10px;
margin:auto;
}

.demoTable td, .demoTable th {
padding: 4px;
}

.demoTable thead th {
text-align: center;
background: #F5F5F5;
color: #666;
border: 1px solid #FFF;
text-transform:uppercase;
}


.demoTable tbody th {
font-weight: bold;
}

.demoTable tbody tr {
background-color:#D1D3D2;
text-align:left;
}
.demoTable tbody tr.odd {
background: #f9f9f9;
border-top:1px solid #FFF;
}

.demoTable tbody tr td {
height:50px;
background: #FFF;
border: 1px solid #FFF;
}

.demoTable tbody tr.odd td{
background: #f9f9f9;
border-top:1px solid #FFF;
}

.demoTable td a:link, .demoTable td a:visited {
color: #1975D7;
text-decoration: none;
}

.demoTable td a:hover {
color: #000000;
border-bottom:2px solid #8FD5FF;
text-decoration: none ;
}

.demoTable tfoot th, .demoTable tfoot td {
background-color: #E2C55F; padding:10px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:22px; font-weight:bold; font-style:italic;
border-bottom:3px solid #CCC;
border-top:1px solid #DFDFDF;
}

[gVenom]

Saludos.

Bueno, asi, adivinando un poco me imagino que la tabla que tiene esos estilos dice algo asi:

Código HTML:

<table class="demoTable"> 

luego, todo el css le da propiedades a la tabla, a cada columna y fila, todo con la misma clase "demoTable" .demoTable td, .demoTable tr, .demoTable th, la unica anchura (si asi se dice) que se refleja en el código, es el de la tabla en si:

Código css:

.demoTable {
border-spacing:1px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background-color:#E7E7E7;
color: #000000;
width:70&#37;;/* <---------- ancho de la tabla */
margin:auto;
}
 

asi que si quieres cambiarle el ancho a una columna en especifico, tienes que crear una nueva clase para esa columna, algo asi:

Código css:

.micolumna {
 width: 20%;
}
 

y cuando vas al html, tienes que ponerle a esa columna asi:

<tr class="micolumna">

[jomaruro]

Hola:

Como gVenom ya te dió la solución yo te indico algo que he visto al vuelo.

Iniciado por pollo_c2

.demoTable td, .demoTable tr, .demoTable th{
border-collapse: separate;
border-collapse: collapse;
border-spacing: 0;
}

Tienes repetido el border-collapse, con lo cual sólo hará caso a la segunda.

Saludos.