2014-09-15 5 views
9
Arbeits

Hier ist mein html:Spaltenbreite für <th> nicht

 <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> 

Problem ist, wenn Breite für die erste Spalte Einstellung: Es wird nicht unter 16px gehen. Wenn ich eine größere Breite (20,50) anlege, wird die farbige Spalte größer, aber wenn ich versuche, sie dünner zu machen (zum Beispiel 7px), hat das keine Wirkung. Wie kann ich es tun, ohne eine CSS-Klasse aus vorhandenen Vorlage zu entfernen. Die farbige Spalte muss zuerst sein, die Höhe muss der Höhe der Zeile entsprechen und ich muss die Breite auf jeden Wert einstellen können, den ich möchte.

+0

Scheint zu funktionieren hier http://jsfiddle.net/mendesjuan/qq3L0o77/. Oops vergiss es, bricht es, nachdem Sie bootstrap http://jsfiddle.net/mendesjuan/qq3L0o77/1/ –

+0

etwas wie [this] hinzufügen (http://jsfiddle.net/3a5vgm2c/)? – Litestone

+0

@Litestone Lesen Sie meinen Kommentar, das Problem passiert, wenn Sie bootstrap –

Antwort

6

Es ist, weil der Bootstrap CSS ist 8px Polsterung an die Tabellenzellen hinzugefügt (weshalb Ihre min Breite 16px: 8px links und 8px rechts) - versuchen Sie, padding:0; für diese Zellen und es sollte funktionieren

Example

+0

hinzufügen Beachten Sie, dass es eine Menge Spezifität, um es in einem CSS-Abschnitt hinzuzufügen benötigt, da Bootstrap '.table> thead> tr> td' –

+0

@JuanMendes Wie OP verwendet Inline-Stile, sollten sie die Stylesheet-Stile überschreiben, sonst ja müssen sie spezifischer sein als die CSS im Bootstrap. – Pete

+0

Das ist, was ich gesagt habe, wenn das OP zu Best Practices verwenden wird, müssen sie High verwenden Spezifität. Ich habe nie gesagt, was du hast, funktioniert nicht, aber ich bin mir sicher, dass wir zustimmen, dass es nicht der beste Weg ist, Dinge zu tun. –

2

Es ist möglich, dass der Bootstrap min-width auf th oder td gesetzt hat. Wenn dem so ist, würde ich einen zusätzlichen Stilblock hinzufügen (im HTML, wenn Sie kein externes CSS hinzufügen/bearbeiten können), damit die erste Spalte so klein ist, wie Sie möchten:

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