<分区>
<分区>
我有一个三列多行的表格。首先是图像，因此行中的所有单元格都将自身调整为图像列的大小。这样，如果第二列和第三列中有文本，文本将被放置在单元格的中间。但是，如果我想将该文本放在单元格顶部边框的正下方(控制单元格内容和单元格边框之间的填充)，我该怎么做？
这篇文章的标题比上面的段落更清楚......但是如果你需要更多信息......
这是代码:(但它的 MVC Razor )
<div id="results" style="margin-left:120px; margin-top:25px;border:1px solid black;margin-right:120px;">
<table style="width:800px;background-color:#e8e8e8;">
<tr>
<th>
</th>
<th>
@Html.DisplayName("Product Name")
</th>
<th></th>
<th>
@Html.DisplayName("Price")
</th>
<th></th>
</tr>
@foreach (var item in Model.Products) {
<tr>
<td>
<div class="img-column-width">
<img src="@Url.Content(@item.ProdImage.Trim())" alt="@item.ProdName" class="img-thumb-bottle"/>
</div>
</td>
<td>
@Html.DisplayFor(modelItem => item.ProdName)
</td>
<td>
<label>LKR</label>
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
</tr>
}
这是 CSS:
.img-thumb-bottle {
height:200px;
width:50px;
margin:5px;
}
.img-column-width {
width:300px;
}
.productname-column-width {
width:500px;
height:1px;
border:100px solid red;
}
最佳答案
您可以使用垂直对齐来对齐表格单元格的内容。
可用选项是 top middle bottom 或 baseline
td {vertical-align: top;}<table>
<tr>
<td><img src="http://lorempixel.com/image_output/nightlife-h-g-291-326-2.jpg"></td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
</table>关于html - 如何删除表格中单元格内容和单元格边框之间的填充？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34333002/