英文:
How can i make div in bottom of table td?
问题
如何在HTML表格的td底部创建一个div？
<table style="width:100px;">
<thead class="text-center">
<th>Name</th>
<th>Marks</th>
</thead>
<tbody>
<tr>
<td>Nikhil</td>
<td>60<br><div>平均</div></td>
</tr>
<tr>
<td>Akhil</td>
<td>90<br><div>优秀</div></td>
</tr>
<tr>
<td>Alan</td>
<td>40<br><div>差</div></td>
</tr>
</tbody>
</table>
附带参考图像。
英文:
How can make a div in bottom of td of table in html?
<table style="width:100px;" >
<thead class="text-center">
<th>Name</th>
<th>Marks</th>
</thead>
<tbody>
<tr>
<td>Nikhil</td>
<td>60<br>Average</td>
</tr>
<tr>
<td>Akhil</td>
<td>90<br>Excellent</td>
</tr>
<tr>
<td>Alan</td>
<td>40<br>Poor</td>
</tr>
</tbody>
</table>
For reference i have attached image.
TIA
答案1
得分: 2
更新
从语义上讲，我不建议在一个单元格中混合两个值。但是，您可以使用span标记嵌入您的两个值，然后简单地应用display:block属性。然后，您可以在两个td上应用vertical-align:top属性。
.name,
.rating {
vertical-align: top;
}
.rating span {
display: block;
text-align: right;
}
.rating .excellent {
color: green;
}
.rating .average {
color: orange;
}
.rating .poor {
color: red;
}
<table style="width:100px;">
<thead class="text-center">
<th>Name</th>
<th>Marks</th>
</thead>
<tbody>
<tr>
<td class="name">Nikhil</td>
<td class="rating">
<span>60</span>
<span class="average">Average</span>
</td>
</tr>
<tr>
<td class="name">Akhil</td>
<td class="rating">
<span>90</span>
<span class="excellent">Excellent</span>
</td>
</tr>
<tr>
<td class="name">Alan</td>
<td class "rating">
<span>40</span>
<span class="poor">Poor</span>
</td>
</tr>
</tbody>
</table>
您不需要一个div，您可以使用tfoot，它用于定义汇总表格列的一组行：
<table style="width:100px;">
<thead class="text-center">
<th>Name</th>
<th>Marks</th>
</thead>
<tbody>
<tr>
<td>Nikhil</td>
<td>60</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Average</td>
</tr>
</tfoot>
</table>
此外，您还可以使用colspan属性扩展平均行：
<table style="width:100px;">
<thead class="text-center">
<th>Name</th>
<th>Marks</th>
</thead>
<tbody>
<tr>
<td>Nikhil</td>
<td>60</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align: right;">Average</td>
</tr>
</tfoot>
</table>
英文:
Update
Semantically, I do not recommend mixing two values in one cell. However, you can embed your two values using the span tag on which you simply apply the display:block property. Then you apply the vertical-align:top property on both td.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.name,
.rating {
vertical-align: top;
}
.rating span {
display:block;
text-align:right;
}
.rating .excellent {
color: green;
}
.rating .average {
color: orange;
}
.rating .poor {
color: red;
}
<!-- language: lang-html -->
<table style="width:100px;" >
<thead class="text-center">
<th>Name</th>
<th>Marks</th>
</thead>
<tbody>
<tr>
<td class="name">Nikhil</td>
<td class="rating">
<span>60</span>
<span class="average">Average</span>
</td>
</tr>
<tr>
<td class="name">Akhil</td>
<td class="rating">
<span>90</span>
<span class="excellent">Excellent</span>
</td>
</tr>
<tr>
<td class="name">Alan</td>
<td class="rating">
<span>40</span>
<span class="poor">Poor</span>
</td>
</tr>
</tbody>
</table>
<!-- end snippet -->
You don't need a div, you could just use a tfoot, which is used to define a set of rows summarizing the columns of the table:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<table style="width:100px;">
<thead class="text-center">
<th>Name</th>
<th>Marks</th>
</thead>
<tbody>
<tr>
<td>Nikhil</td>
<td>60</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Average</td>
</tr>
</tfoot>
</table>
<!-- end snippet -->
In addition, you could also expand the average row with the colspan attribute:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<table style="width:100px;">
<thead class="text-center">
<th>Name</th>
<th>Marks</th>
</thead>
<tbody>
<tr>
<td>Nikhil</td>
<td>60</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align: right;">Average</td>
</tr>
</tfoot>
</table>
<!-- end snippet -->
答案2
得分: -1
以下是代码的翻译部分：
<table style="width:100px">
<thead class="text-center">
<th>Name</th>
<th>Marks</th>
</thead>
<tbody>
<tr>
<td>Nikhil</td>
<td>60</td>
</tr>
<tr>
<td>Danixal</td>
<td>71</td>
</tr>
<tr>
<td>Clarke</td>
<td>39</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td><div>Average</div></td>
</tfoot>
</table>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<table style="width:100px;" >
<thead class="text-center">
<th>Name</th>
<th>Marks</th>
</thead>
<tbody>
<tr>
<td>Nikhil</td>
<td>60</td>
</tr>
<tr>
<td>Danixal</td>
<td>71</td>
</tr>
<tr>
<td>Clarke</td>
<td>39</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td><div>Average</div></td>
</tfoot>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论