無論我做什麼，表格元素都不響應編輯

-1

我想製作一張食物和營養表，但是有一個問題。無論我做什麼寬度的<td>和<th>元素都不會改變。 ..我想我的表看起來相反的THIS 無論我做什麼，表格元素都不響應編輯

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

感謝像this（無頭）。

來源

2016-12-15 Dako

因爲'.Table1-row1'不存在。你可能意思是'＃table1 .row1 th {/ * your th styles * /}'。另外，'th'元素應該只在'thead'中。 – Vucko

對不起，我編輯了片段。這只是一個片段錯誤，當我正在粘貼片段時我正在改變我的課程，並且我忘記在這裏修改它。 – Dako

如果你看看你的snipper，你會發現它正在工作 - 它將樣式添加到'.row1'中的'th'元素。 – Vucko

Ther's no .Table1 class in your html。只需使用.row1 > th

要設置的th寬度可以使用：

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>

來源

2016-12-15 09:36:06 Arkej

感謝您的時間隊友，這是我的錯誤，我沒有取代片段中的類。因爲當我在這裏添加類時，我正在將它們重命名爲我的網站並搞砸了。我嘗試了以下建議：nth-child（1）它可以工作，但在調整此單元格時拉動整行，是否有辦法無需調整所有內容即可調整它的大小：？ – Dako

「拉整行」是什麼意思？ – Arkej

是你在找什麼？

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

來源

2016-12-15 09:45:00 vadber

工作，謝謝<3 – Dako

無論我做什麼，表格元素都不響應編輯

回答

相關問題