Редактирование в процентах ширины столбца таблицы с изображениями

Question

У меня много разных страниц просмотра с разной шириной таблиц.Пример:

• View 1 Product.cshtml: первый столбец имеет ширину 25%, второй столбец имеет ширину 75%
• View 2 Customer.cshtml: первый столбец имеет ширину 40%, второйширина столбца 60%

Итак, используя ресурсы, я отредактировал csstemplate. Как установить ширину столбцов таблицы в представлении MVC?

С одним текстом решение прекрасно работает.Однако, когда я добавляю изображения, он полностью игнорирует проценты ширины таблицы, делая изображение очень большим.Как бы я решить эту проблему и сохранить изображение только на 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 }))

Answer 1

На самом деле это не относится к ASP.NET Core MVC .Это примерно Html и CSS.
Все, что вам нужно сделать, это добавить этот стиль CSS в таблицу стилей:

.col1 img { width: 100% }