Question

我有一个包含三列和多行的表。首先是图像，因此行中的所有单元格将自己调整为图像列的大小。如果在第2列和第3列中有文本，则文本将放置在单元格的中间。但是，如果我想将该文本放在单元格的顶部边框下方（控制单元格内容和单元格边框之间的填充），我该怎么做？

这篇文章的标题比以上段落更清晰，但如果您需要更多信息.....

这是代码:(但它的MVC剃须刀）

<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;
}

Answer 1

您可以使用垂直对齐来对齐表格单元格的内容。可用选项为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>

如何删除单元格内容与表格中单元格边框之间的填充？

1 个答案: