Html 如何在表格单元格的底部放置div？

我厌倦了搜索，无法完成这一点：1个标签位于单元格左上角，内容位于底部中心。为了实现这一点，我在TD中使用了2个div，但只要我能够实现目标，我不介意改变这一点

我不知道标签的大小（它们可以翻译成不同的语言，因此大小不同）

原始桌子的高度为A4肖像的一半。它是7（行）*5（列）（除了中间的1个单元格，我使用ROWSPAN＝“2”）

我尝试了“将父对象设置为

位置：相对的
，并使容器
位置：绝对；底部：0
”解决方案，但无法使其工作

基本上，我希望将1个标签设置到单元格的左上方，内容设置在单元格的中下方

950px宽度用于打印目的

这里有一个JSFIDLE链接来举例说明我的问题。

---

提前感谢。

如下更改您的CSS：

.tableClass {
    width: 950px;
    table-layout: auto;
    margin-top: 8px;
    border-color: black;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-spacing: 0;
    border-collapse: collapse;    
}

.tableClass td{
    border-color: black;
    border-width: 1px 1px 0 0;
    border-style: solid;
    margin: 0;
    padding: 4px 0;
    position:relative;
    vertical-align:top;
}
.label{position:relative; margin:4px; margin-bottom:30px /* adjust to bottom size */; }
.content{width:100%; position:absolute; bottom:1px; left:0; background:#fc0; margin:0; text-align:center;}

---

我已经添加了一个背景色用于可视化目的，但当然你需要随意编辑

如下更改您的CSS：

.tableClass {
    width: 950px;
    table-layout: auto;
    margin-top: 8px;
    border-color: black;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-spacing: 0;
    border-collapse: collapse;    
}

.tableClass td{
    border-color: black;
    border-width: 1px 1px 0 0;
    border-style: solid;
    margin: 0;
    padding: 4px 0;
    position:relative;
    vertical-align:top;
}
.label{position:relative; margin:4px; margin-bottom:30px /* adjust to bottom size */; }
.content{width:100%; position:absolute; bottom:1px; left:0; background:#fc0; margin:0; text-align:center;}

---

我已经添加了一个背景色用于可视化目的，但当然你需要随意编辑

这里有一个flexbox解决方案，可以处理任意大小的

.label

和

.content

：

单元格的内容应放在包装器中

div

：

<td>
     <div>
         <div class="label">This Label is large / and divided [eph] really large label.And some more text, text, text, and more text.....<br /><br /></div>
         <div  class="content">BOTTOM</div>
     </div>
</td>

---

这里有一个flexbox解决方案，可以处理任意大小的

.label

和

.content

：

单元格的内容应放在包装器中

div

：

<td>
     <div>
         <div class="label">This Label is large / and divided [eph] really large label.And some more text, text, text, and more text.....<br /><br /></div>
         <div  class="content">BOTTOM</div>
     </div>
</td>

---

我没有设法使它与

div:only类型的
spec一起工作，但是我在每个div包装器中添加了一个类，它工作得非常出色。我不知道为什么，但我更喜欢你的解决方案。谢谢。很高兴为您提供帮助。我没有设法使它与
div:only类型的
spec一起工作，但我为每个div包装器添加了一个类，它工作得非常出色。我不知道为什么，但我更喜欢你的解决方案。谢谢。很乐意帮忙。