Columna de ancho fijo en la tabla HTML con table-layout=auto

Pudiera darse el caso de que halles algún fallo en tu código o trabajo, recuerda probar siempre en un entorno de testing antes subir el código al proyecto final.

Solución:

Puedes hacer esto usando CSS si usas nth-child

CSS:

.table 
    table-layout:auto

td, th 
    border: 1px solid #999;
    padding: 0.5rem;

.table1 th:nth-child(1), .table1 td:nth-child(1) 
    width: 200px; /*becomes 218px with padding*/
    background: hsl(150, 50%, 50%);

HTML:

table 1


    

        

            
Column 1
            
Column 2
            
Column 3
        
    
    

        

            
I'm 218px wide!
            
00001
            
Blue
        
        

            
I'm 218px wide!
            
00002
            
Red
        
        

            
I'm 218px wide!
            
00003
            
Green
        
    


 






table 2


    

        

            
Column 1
            
Column 2
            
Column 3
        
    
    

        

            
I'm 118px wide!
            
00001
            
Blue
        
        

            
I'm 118px wide!
            
00002
            
Red
        
        

            
I'm 118px wide!
            
00003
            
Green
        
    

Aquí hay una demostración: http://jsfiddle.net/3dyhE/2/

Aquí puedes ver las comentarios y valoraciones de los lectores

Si estás contento con lo expuesto, tienes la libertad de dejar una crónica acerca de qué te ha parecido esta crónica.

---

---

Utiliza Nuestro Buscador