Tabelle Elemente reagiert nicht zu bearbeiten, egal was ich tue

-1

Ich möchte eine Tabelle für Lebensmittel und Ernährung, aber es gibt ein Problem. Egal was ich tun Breite der <td> und <th> Elemente werden nicht geändert. ..ich will meinen Tisch etwas wie this (ohne Header) suchen statt THIS Tabelle Elemente reagiert nicht zu bearbeiten, egal was ich tue

#table1{ 
 
    table-layout:fixed; 
 
    width:100%; 
 
} 
 
.row1 > th{ 
 
    border-right:1px solid #ddd; 
 
    padding:0.75em; 
 
}

<table id="table1"> 
 
    <thead> 
 
    <tr class="row1"> 
 
     <th>Foods</th><th>Carbohydrates</th><th>Proteins</th><th>Fats</th><th>Calories Total</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="row2"> 
 
     <th>Foods</th><th>Carbohydrates</th><th>Proteins</th><th>Fats</th><th>Calories Total</th> 
 
    </tr> 
 
    </tbody> 
 
</table>

Dank.

Quelle

2016-12-15 Dako

Weil '.Table1-row1' existiert nicht. Du meintest wahrscheinlich '# table1 .row1 th {/ * your th styles * /}'. Außerdem sollten 'th' Elemente nur in the'ad' sein. – Vucko

Sorry, mein Fehler, ich habe das Snippet bearbeitet. Es war nur ein Schnipselfehler, ich habe meine Klassen geändert, als ich das Snippet eingefügt habe und ich habe vergessen, es hier zu ändern. – Dako

Wenn Sie sich Ihren Snipper anschauen, werden Sie sehen, dass er funktioniert - er fügt Styles zu den 'th' Elementen im' .row1' hinzu. – Vucko

Ther's keine .Table1 Klasse in Ihrem HTML. Verwenden Sie einfach .row1 > th

einzustellen Breite von th können Sie:

th:nth-child(1) { 
    width: 15%; 
}

#table1{ 
 
table-layout:fixed; 
 
width:100%; 
 
} 
 
.row1 > th{ 
 
border-right:1px solid #ddd; 
 
padding:0.75em; 
 
} 
 
.row2 > th{ 
 
border-right:1px solid #ddd; 
 
padding:0.75em; 
 
} 
 
th:nth-child(1) { 
 
    width: 10%; 
 
} 
 
th:nth-child(2) { 
 
    width: 35%; 
 
} 
 
th:nth-child(3) { 
 
    width: 15%; 
 
} 
 
th:nth-child(4) { 
 
    width: 15%; 
 
} 
 
th:nth-child(5) { 
 
    width: 20%; 
 
}

<table id="table1"> 
 
<thead> 
 
<tr class="row1"> 
 
<th>Foods</th><th>Carbohydrates</th><th>Proteins</th><th>Fats</th><th>Calories Total</th> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<tr class="row2"><th>Foods</th><th>Carbohydrates</th><th>Proteins</th><th>Fats</th><th>Calories Total</th></tr> 
 
</tbody> 
 
</table>

Quelle

2016-12-15 09:36:06 Arkej

Vielen Dank für die Zeit Kumpel, es war mein Fehler, ich habe nicht die Klassen im Schnipsel zu ersetzen .Wenn ich hier Klassen hinzufügte, benannte ich sie in meiner Site um und durcheinander. Ich versuchte Ihren Vorschlag mit: nth-child (1) es funktioniert, aber zieht meine ganze Reihe, wenn ich diese Zelle verändere, gibt es einen Weg zu Größe ändern, ohne dass alle Inhalte gezogen werden :? – Dako

Was meinst du mit "ganze Reihe ziehen"? – Arkej

Ist das, was Sie suchen?

#table1{ 
 
    table-layout:fixed; 
 
    width:100%; 
 
} 
 
.row1 > th, .row2 > td{ 
 
    border-right:1px solid #ddd; 
 
    padding:0.75em; 
 
    text-align: left; 
 
}

<table id="table1"> 
 
    <thead> 
 
    <tr class="row1"> 
 
     <th style="width:40%;">Foods</th> 
 
     <th style="width:20%;">Carbohydrates</th> 
 
     <th style="width:15%;">Proteins</th> 
 
     <th style="width:10%;">Fats</th> 
 
     <th style="width:15%;">Calories Total</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="row2"> 
 
     <td>Foods</td> 
 
     <td>Carbohydrates</td> 
 
     <td>Proteins</td> 
 
     <td>Fats</td> 
 
     <td>Calories Total</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Quelle

2016-12-15 09:45:00 vadber

Das hat funktioniert, Danke <3 – Dako

Tabelle Elemente reagiert nicht zu bearbeiten, egal was ich tue

Antwort

Verwandte Themen