我有许多具有许多表格宽度的不同 View 页面。示例:
- 查看 1 Product.cshtml:第一列的宽度为 25%,第二列的宽度为 75% 宽度
- 查看 2 Customer.cshtml:第一列的宽度为 40%,第二列的宽度为 60% 宽度
所以利用资源,我编辑了 csstemplate。 How can I set table column widths in an MVC view?
只有文本,该解决方案效果很好。 但是,当我添加图像时,它完全忽略了表格宽度百分比,使图像看起来非常大。我将如何解决这个问题并将图像保持在 25%?
注意:目前提供的静态图像用于测试,稍后将变为可变图像。
站点.css
.col1 {
width: 25%;
}
.col2 {
width: 75%;
}
Product Index.cshtml
@model IPagedList<ElectronicsStore.Models.Product>
@{
ViewBag.Title = "Products";
int counter = 0;
}
@using X.PagedList;
@using X.PagedList.Mvc.Core;
<table class="table" >
<thead>
<tr>
<th class="col1">
Product Image
</th>
<th class="col2">
Product Name
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in ViewBag.OnePageOfProducts)
{
<tr>
<td class="col1">
<img src="~/images/TV.jpg" data-holder-rendered="true" />
</td>
<td class="col2">
@item.ProductName
</td>
</tr>
}
</tbody>
</table>
@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page }))
最佳答案
实际上它与 ASP.NET Core MVC 无关。它只是关于 Html
和 CSS
。
您需要做的就是将此 CSS 样式添加到您的样式表中:
.col1 img { width: 100% }
关于html - 表格列宽百分比编辑图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52474420/