Cómo estilizar el directorio recursivo con css?

Estoy tratando de hacer una visualización de directorio recursivo en html usando datos json de un servidor node.js y usándolo como el contexto de representación para una plantilla dustjs-linkedin . Los datos contienen una estructura como la siguiente:

{ "isDirectory": true, "path": "", "name": "", "files": [ { "name": "Light House.jpg", "filename": "Light%20House.jpg", "path": "/Light%20House.jpg", "bytes": 561276, "date": "2012-07-25T16:30:45.094Z", "prettyDate": "Jul 25 2012 11:30:45", "type": "image/jpeg", "size": "548.1 kB", "indent": 15, "id": "file0" }, { "isDirectory": true, "path": "/folder0", "name": "folder0", "files": [ { "name": "Desert.jpg", "filename": "Desert.jpg", "path": "/folder0/Desert.jpg", "bytes": 845941, "date": "2012-07-25T16:30:41.301Z", "prettyDate": "Jul 25 2012 11:30:41", "type": "image/jpeg", "size": "826.1 kB", "indent": 30, "id": "file0_0" } ], "id": "file0_0", "indent": 15, "bytes": 845941, "date": "2012-07-25T16:30:41.301Z", "prettyDate": "Jul 25 2012 11:30:41", "size": "826.1 kB" }, { "isDirectory": true, "path": "/folder1", "name": "folder1", "files": [ { "name": "Jellyfish.jpg", "filename": "Jellyfish.jpg", "path": "/folder1/Jellyfish.jpg", "bytes": 775702, "date": "2012-07-25T16:30:41.266Z", "prettyDate": "Jul 25 2012 11:30:41", "type": "image/jpeg", "size": "757.5 kB", "indent": 30, "id": "file0_1" } ], "id": "file0_1", "indent": 15, "bytes": 775702, "date": "2012-07-25T16:30:41.266Z", "prettyDate": "Jul 25 2012 11:30:41", "size": "757.5 kB" }, { "isDirectory": true, "path": "/folder2", "name": "folder2", "files": [ { "name": "Koala.jpg", "filename": "Koala.jpg", "path": "/folder2/Koala.jpg", "bytes": 780831, "date": "2012-07-25T16:30:41.384Z", "prettyDate": "Jul 25 2012 11:30:41", "type": "image/jpeg", "size": "762.5 kB", "indent": 30, "id": "file0_2" } ], "id": "file0_2", "indent": 15, "bytes": 780831, "date": "2012-07-25T16:30:41.384Z", "prettyDate": "Jul 25 2012 11:30:41", "size": "762.5 kB" }, { "isDirectory": true, "path": "/folder3", "name": "folder3", "files": [ { "name": "Penguins.jpg", "filename": "Penguins.jpg", "path": "/folder3/Penguins.jpg", "bytes": 777835, "date": "2012-07-25T20:42:31.170Z", "prettyDate": "Jul 25 2012 15:42:31", "type": "image/jpeg", "size": "759.6 kB", "indent": 30, "id": "file0_4" } ], "id": "file0_4", "indent": 15, "bytes": 777835, "date": "2012-07-25T20:42:31.170Z", "prettyDate": "Jul 25 2012 15:42:31", "size": "759.6 kB" } ], "id": "file0", "indent": 0, "bytes": 3741585, "date": "2012-07-25T20:42:31.170Z", "prettyDate": "Jul 25 2012 15:42:31", "size": "3.6 MB" } 

Y la plantilla para renderizar a partir de ahora es esta:

   {?.isDirectory} 
{.name}
{.size}
{.prettyDate}
{#.isDirectory parentId=.id} {#files} {>"views/directory.dust"/} {/files} {/.isDirectory} {:else}
{.name}
{.size}
{.prettyDate}
<!--
-->
{/.isDirectory}

El problema es que a partir de ahora, el complemento de colapsar para bootstrap no funciona con un elemento display:table-row , entonces estoy buscando una forma de hacer que la salida html alinee verticalmente los elementos de las clases file-name , file-size y file-date al sangrar los icons de carpeta / archivo para cada archivo su respectiva cantidad. Me doy cuenta de que esta es una pregunta bastante específica, por lo que estaré abierto a cualquier sugerencia para repensar la forma en que estoy haciendo esto (excepto que no cambiaré los motores de vista o la plataforma que estoy usando, obviamente).

Editar

Me gustaría señalar que por la forma en que esto se traduce a partir de ahora, todo en mi último párrafo que mencioné funciona de maravilla excepto el complemento de colapso. También podría señalar que toda la CSS que estoy usando para hacer funcionar la alineación vertical está aquí:

 .files { display:table; } .file-stats { display:table-row; } .file-name, .file-size, .file-date { padding: 0px 4px 0px 4px; } .file-name { display:table-cell; overflow: hidden; text-overflow:ellipsis; } .file-size { display:table-cell; overflow: hidden; text-overflow:ellipsis; } .file-date { display:table-cell; overflow: hidden; text-overflow:ellipsis; } 

Use display:inline-block con un marcador de posición para alinear verticalmente los elementos sin usar display:table-row . Para manejar la sangría recursiva, reemplazar div class="collapse" con blockquote class="collapse" podría funcionar.