无论我做什么，表格元素都不响应编辑

-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

无论我做什么，表格元素都不响应编辑

回答

相关问题