Larghezza colonna per <th> non funziona

Ecco il mio html:Larghezza colonna per <th> non funziona

 <html> 
<head> 
<meta charset="utf-8">  

<link href="css/bootstrap.css" rel="stylesheet"> 
<link href="css/bootstrap-theme.css" rel="stylesheet"> 

</head> 
<body style="padding-top: 47px;"> 

<table class="table table-hover table-striped-custom"> 
    <thead> 
     <tr> 
      <th style="width: 5px;"></th> 
      <th>Column2</th> 
      <th>column2</td> 
     </tr> 
    </thead> 
    <tbody> 
      <tr> 
       <td style="background-color: #FF5F5F;width: 5px;"></td> 
       <td>blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> 
       <td>bla</td> 
      </tr> 
      <tr> 
       <td style="background-color: deepskyblue"></td> 
       <td>bla</td> 
       <td>bla</td> 
      </tr> 

    </tbody> 
</table>

Il problema è che quando si imposta la larghezza per la prima colonna: non andrà sotto 16px. Se metto una larghezza maggiore (20,50), la colonna colorata diventa più grande, ma quando provo a impostarli più sottili (ad esempio 7px), non ha alcun effetto. Come posso farlo, senza rimuovere alcuna classe CSS dal modello esistente. La colonna colorata deve essere la prima, l'altezza deve essere come l'altezza della riga e devo essere in grado di impostare la sua larghezza su qualsiasi valore che voglio.

fonte

2014-09-15 Error

sembra funzionare qui http://jsfiddle.net/mendesjuan/qq3L0o77/. Oops Nevermind, si rompe dopo aver aggiunto bootstrap http://jsfiddle.net/mendesjuan/qq3L0o77/1/ –

qualcosa come [questo] (http://jsfiddle.net/3a5vgm2c/)? – Litestone

@Litestone Leggi il mio commento, il problema si verifica quando aggiungi bootstrap –

E 'perché il vostro css bootstrap è l'aggiunta 8px imbottitura per le celle della tabella (che è il motivo per cui la vostra larghezza min è 16px: 8px sinistra più 8px destra) - si provi ad aggiungere padding:0; per quelle cellule e dovrebbe funzionare

Example

fonte

2014-09-15 14:58:20 Pete

Nota che per aggiungerlo in una sezione CSS sarà necessaria molta specificità dal momento che bootstrap usa '.table> thead> tr> td' –

@JuanMendes come OP sta usando stili in linea, dovrebbero sovrascrivere gli stili del foglio di stile, altrimenti sì, dovranno essere più specifici del css nel bootstrap – Pete

Questo è quello che ho detto, se l'OP si sposterà a utilizzare le best practice, dovranno usare specificità. Non ho mai detto che quello che hai non funziona, ma sono sicuro che siamo d'accordo che non è il modo migliore di fare le cose. –

È possibile che bootstrap abbia impostato min-width su th o td. Se è così, mi piacerebbe aggiungere un blocco di stile aggiuntivo (in HTML, se non è possibile aggiungere/modificare CSS esterno), per consentire la prima colonna di essere il più piccolo a piacere:

<style type="text/css"> 
    .table td:first-child, .table th:first-child { 
    min-width: 0; 
    padding: 0; 
    } 
</style>

fonte

2014-09-15 14:59:20

Larghezza colonna per <th> non funziona

risposta

Problemi correlati