Tengo un sitio creado con bootstrap y quiero crear una tabla con encabezado deslizable utilizando el complemento jquery.dragscroll pero conservando el bootstrap integrado en la rejilla fluida.

Así que quiero crear los encabezados de la tabla, y estoy usando este HTML:

<div class="row-fluid">
    <div class="span12">
        <div style="overflow:hidden;width:90%;">
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
            <div style="display:inline-block;width:100px">some content</div>
        </div>
    </div>
</div>

El código está aquí:http://jsfiddle.net/cVfzJ/1/

Como podemos ver en el violín, todos los divs son visibles en dos filas, mi objetivo es tener todos los divs en una sola fila (ocultando los divs desbordados)

Espero que la pregunta sea clara.