Come applicare il raggio del bordo a nel bootstrap?

Ho bisogno di una fila di angoli arrotondati e una spaziatura tra row -row. Quindi, ho provato la class curvata da tavolo come sotto. Eventuali suggerimenti / modifiche sarebbero utili.

Il mio CSS –

.table-curved { border-collapse: separate; } .table-curved { border: solid #ccc 1px; border-radius: 6px; border-left:0px; } .table-curved tr { border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-radius: 26px; border-collapse:seperate; border-spacing:5em; } .table-curved th { border-top: none; } .table-curved th:first-child { border-radius: 6px 0 0 0; } .table-curved th:last-child { border-radius: 0 6px 0 0; } .table-curved th:only-child{ border-radius: 6px 6px 0 0; } .table-curved tr:last-child td:first-child { border-radius: 0 0 0 6px; } .table-curved tr:last-child td:last-child { border-radius: 0 0 6px 0; } 

Il mio HTML –

 
Schedule Time First Name Last Name Telephone Status Contact Score Last Contacted Device Type

Per essere più specifico ho bisogno di una riga simile all’immagine qui

Puoi provare il border-radius su td e th . Controlla sotto l’esempio per iniziare.

  1. Regola il border-radius del border-radius come richiesto.
  2. Aggiungi class a tr per avere il background-color desiderato

Approccio 1: una soluzione che usa lo pseudo elemento :before

 .table-curved { border-collapse: collapse; margin-left: 10px; } .table-curved th { padding: 3px 10px; } .table-curved td { position: relative; background-color: #e5e5e5; padding: 6px 10px; border-bottom: 2px solid white; border-top: 2px solid white; } .table-curved td:first-child:before { content: ''; position: absolute; border-radius: 8px 0 0 8px; background-color: coral; width: 12px; height: 100%; left: -12px; top: 0px; } .table-curved td:last-child { border-radius: 0 5px 5px 0; } .table-curved tr:hover td { background-color: #c5c5c5; } .table-curved tr.blue td:first-child:before { background-color: cornflowerblue; } .table-curved tr.green td:first-child:before { background-color: forestgreen; } 
 
Schedule Time First Name Last Name Telephone Status Contact Score Last Contacted Device Type
. . . . . . . .
. . . . . . . .
. . . . . . . .

puoi usare: prima nella prima colonna:

Qui ho creato un esempio per te:

 .table-curved { border-collapse: separate; width:100%; border-spacing:0px; } .table-curved { border: solid #ccc 1px; border-radius: 6px; border-left:0px; } .table-curved tr { position: relative; border-radius: 26px; border-collapse:seperate; border-spacing:0; background:#f8f8f8; backgrnoud-position-x: 10px; padding:10px 0; transition:background .1s; } .table-curved tr:hover { background:#eee; } .table-curved th { border-top: none; } .table-curved th:first-child { border-radius: 6px 0 0 0; } .table-curved th:last-child { border-radius: 0 6px 0 0; } .table-curved th:only-child{ border-radius: 6px 6px 0 0; } .table-curved tr:last-child td:first-child { border-radius: 0 0 0 6px; } .table-curved tr:last-child td:last-child { border-radius: 0 0 6px 0; } .table-curved td:first-child:before { content: ""; display: block; width: 10px; height: 100%; left: 0; top: 0; border-radius: 6px 0 0 6px; position: absolute; } .table-curved td.red:before { background:red; } .table-curved td.green:before { background:green; } .table-curved td.blue:before { background:blue; } .table-curved td.orange:before { background:orange; } .table-curved td:first-child{ padding-left: 15px; } .table-curved td{ position: relative; border-bottom: 10px solid white; border-spacing: 0px; padding: 10px; } 

Non è ansible applicare il raggio del bordo alla riga della tabella, ma è ansible aggiungere il raggio del bordo al TD, ecco un esempio

 'http://jsfiddle.net/theazureshadow/LRKXD/1/'