Tablas con CSS

[aguila_393]

Estoy haciendo una tabla en CSS, despues de buscar en internet encontre para hacerlo de esta manera:

Código HTML:

<div class="tabla">
                <div class="fila">
                    <div class="columna">
                        Materia
                    </div>
                    <div class="columna">
                        Fecha
                    </div>
                    <div class="columna">
                        Resultado
                    </div>
                </div>
</div>
 

Y el css es el siguiente:

Código CSS:

.tabla {
    display:table;
    border-spacing:5px;
}
 
.fila {
    display:table-row;
}
 
.columna {
    display:table-cell;
    width:20%;
}
 

El problema es que no funciona, es como que no hace ninguna tabla, me ponele todas las columnas una abajo de la otra, como si creara divs directamente, graficamente me quedaria asi:

Materia
Fecha
Resultado

Cuando tendrian que ser columnas.

Alguien tiene idea porque pasa esto? Supuse que seria que la div se comporta como un bloque y no deja que otra se ponga al costado, pero tampoco puedo ponerle display inline porque ya tengo puesto display table-cell y solo puedo poner uno.