Come creare un'intestazione griglia utilizzando Twitter Bootstrap?

Question

Come può una griglia di bootstrap essere in stile con un semplice colpo di testa come l'immagine qui sotto?

Quando provo cambiando il colore della prima fila di sfondo, il colore non si estende fino al bordo della griglia perché dell'imbottitura griglia. Quando rimuovo il rivestimento della griglia sinistra/destra, rovina gli angoli arrotondati.

il codice HTML si presenta così:

<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px"> 
<div class="row-fluid"> 
    <div class="span3">Name</div> 
    <div class="span3">Count</div> 
</div> 
<div class="row-fluid"> 
    <div class="span3">Joe</div> 
    <div class="span3">10</div> 
</div> 
<div class="row-fluid"> 
    <div class="span3">Bob</div> 
    <div class="span3">7</div> 
</div> 
</div> 

Answer 1

fa questo aiuto? rounded corners on divs with background color.

<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px; padding: 0px"> 
    <div class="row-fluid" style="background-color: #f0f0f0; border-top-left-radius: 10px; border-top-right-radius: 10px;"> 
     <div class="span3">Name</div> 
     <div class="span3">Count</div> 
    </div> 
    <div class="row-fluid"> 
     <div class="span3">Joe</div> 
     <div class="span3">10</div> 
    </div> 
    <div class="row-fluid"> 
     <div class="span3">Bob</div> 
     <div class="span3">7</div> 
    </div> 
</div> 

Answer 2

Questo è uno di quei casi in cui probabilmente dovresti utilizzare un tavolo. Gli utenti di screen reader lo apprezzeranno e Bootstrap ha degli stili integrati che dovrebbero aiutare.

http://twitter.github.com/bootstrap/base-css.html#tables