使用图像编辑表格列宽百分比

Posted

技术标签:

【中文标题】使用图像编辑表格列宽百分比【英文标题】:Table Column Width Percentage Editing with Images 【发布时间】:2019-02-27 16:12:30 【问题描述】:

我有很多不同的视图页面,有很多表格宽度。示例:

查看 1 Product.cshtml:第一列的宽度为 25%,第二列的宽度为 75% 宽度 查看 2 Customer.cshtml:第一列的宽度为 40%,第二列的宽度为 60% 宽度

所以利用资源,我编辑了csstemplate。 How can I set table column widths in an MVC view?

只有文字,解决方案效果很好。 但是,当我添加图像时,它完全忽略了表格宽度百分比,使图像看起来非常大。我将如何解决这个问题并将图像保持在 25%?

注意:现在提供了一个静态图像进行测试,稍后将变为可变。

Site.css

.col1 
    width: 25%;


.col2 
    width: 75%; 

产品索引.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 ))

【问题讨论】:

【参考方案1】:

其实和ASP.NET Core MVC没有关系。只是关于HtmlCSS。 您需要做的就是将此 CSS 样式添加到您的样式表中:

.col1 img  width: 100% 

【讨论】:

以上是关于使用图像编辑表格列宽百分比的主要内容,如果未能解决你的问题,请参考以下文章

CSS 表格列宽不适合某些屏幕尺寸

自动调整 HTML 表格中的列宽

div 自适应表格列宽度

word表格快捷技巧 word表格快捷窍门

怎样根据内容自动调整excel表格的行高列宽?

网页设计,Access入门 2010,数学