w3-Tabelle die Spalte ungleiche Breite Größe

Ich benutze w3css mit Klasse W3-Tabelle. Ich stelle die Breite für jeden "td" mit Breite 35px und Höhe 35px. Ich fand heraus, dass sich die Breite immer noch nach dem Text ändert.w3-Tabelle die Spalte ungleiche Breite Größe

Hier ist mein Code:

<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css"> 
<style> 
    .box{ 
     width: 35px; 
     height: 35px; 
     border: 1px solid black; 
    } 

    .yellow { 
     background-color: yellow !important; 
    } 
</style> 
<body> 

<table class="w3-table"> 
    <tbody> 
     <tr> 
     <td class="box yellow">20</td> 
     <td class="box yellow">1000</td> 
     <td class="box yellow">2</td> 
     <td class="box yellow">10</td> 
     <td class="box yellow">1000</td> 
     </tr> 
     <tr> 
     <td class="box yellow">&nbsp;</td> 
     <td class="box yellow">&nbsp;</td> 
     <td class="box yellow">&nbsp;</td> 
     <td class="box yellow">&nbsp;</td> 
     <td class="box yellow">&nbsp;</td> 
     </tr> 
    </tbody> 
</table> 

</body> 
</html>

Wo durch ich das Ergebnis ausgegeben, wie unten anhängen:

Dort haben A, B, C, D, E Säule für die einfache beschriftet ich zu erklären. A mit Text 20 B mit Text 1000 C mit Text 2 D mit Text 10 E mit Text 1000

A und D haben zweistelligen Spalt Text also 20 bzw. 10. Ich erwartete, A und D haben die gleiche Breite, aber das Ergebnis zeigte A Breite etwas größer als D. Ich kann daraus schließen, dass die erste Spalte immer etwas größer im Vergleich zu anderen Spalte. Ich merke auch, dass sich die Spaltenbreite entsprechend der Anzahl der Texte ändert. Beispiel 1000 in Spalte B und E Breite größer 2 in Spalte C.

Kann ich wissen, wie Sie sicherstellen können, dass die Spaltenbreite ein festes Größenverhältnis in jeder Spalte beibehält, während eine responsive Webseite aufrechterhalten werden kann?

Ich schätze es, wenn Sie mir ein paar Hinweise dazu geben können.

Quelle

2017-02-21 HenryLoke

Ihre Idee ist ein Fehler. Warum geben Sie für jede Spalte eine feste Breite von 35 Pixeln an, wenn Ihr Tisch 100% breit ist? Dies ist die Ursache für Ihr Problem. Verwenden Sie bei Bedarf prozentuale und minimale/maximale Breite. – plvice

Ich schätze es, wenn Sie mir eine korrekte Idee mit verändertem Quellcode zeigen können. Vielen Dank. – HenryLoke

Ändern Sie diese

.yellow { 
    background-color: yellow !important; 
    max-width:35px; 
}

Dies wird die Breite für alle Spalten gleich machen, auch wenn es einen großen Wert hat. Hier ist der Lauf Beispiel:

.box{ 
 
    width: 35px; 
 
    height: 35px; 
 
    border: 1px solid black; 
 
} 
 
.yellow { 
 
    background-color: yellow !important; 
 
    max-width:35px; 
 
}

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <title>W3.CSS</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css"> 
 
    </head> 
 

 
    <body> 
 
    <table class="w3-table"> 
 
     <tbody> 
 
      <tr> 
 
      <td class="box yellow">20</td> 
 
      <td class="box yellow">1000</td> 
 
      <td class="box yellow">289834595</td> 
 
      <td class="box yellow">10</td> 
 
      <td class="box yellow">1000</td> 
 
      </tr> 
 
      <tr> 
 
      <td class="box yellow">&nbsp;</td> 
 
      <td class="box yellow">&nbsp;</td> 
 
      <td class="box yellow">&nbsp;</td> 
 
      <td class="box yellow">&nbsp;</td> 
 
      <td class="box yellow">&nbsp;</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
    </body> 
 
    </html>

Quelle

2017-02-21 10:04:19

Vielen Dank für die Antwort. Es behebt das Breitenproblem. Übrigens, ist es möglich, das erste Spaltenpolster auch links zu fixieren? – HenryLoke

Können Sie genauer sein, konnte Ihre Frage nicht [email protected] –

Übrigens @HenryLoke, wenn die Antwort Ihr Problem behoben hat, können Sie es mit dem Häkchen als akzeptiert markieren. –

Fügen Sie diese in Ihrem CSS-Datei

table{ 
    table-layout: fixed; 
    width: 300px;

}

hier der Link http://codepen.io/myco27/pen/oBKWYq

Quelle

2017-02-21 09:49:42

können Sie versuchen, von 35px zu 20% css von Feldklasse zu ändern

.box{ 
    width: 20%; 
    height: 35px; 
    border: 1px solid black; 
}

Quelle

2017-02-21 09:49:49

Vielen Dank für die Antwort. Die Anzahl der Spalten ändert sich entweder in 3, 4 oder 5 Spalten. Wir können 20% reparieren, wenn 5 Zeilen und 25% werden, wenn 4 Zeilen usw. – HenryLoke

wenn Sie dynamische Spalten haben. Versuchen Sie einfach folgenden Stil hinzuzufügen .w3-table { table-layout: fixed; } –

w3-Tabelle die Spalte ungleiche Breite Größe

Antwort

Verwandte Themen