c# - 在表格的列标题处插入间距

Question

我的表生成了以下输出，用 Razor、HTML5 编写。但是我不知道如何在图中红色箭头所示的相邻列标题之间插入间距。

我正在寻找一种不同于向列名称添加尾随空格的方法。

这是我的代码:

查看

@model MvcMedicalStore.Models.MedicalProductViewModel

@{
    ViewBag.Title = "Index";
}

<h1>Welcome!</h1>
<br />

<h2>Check out these great deals!</h2>

<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().BrandName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().BasePrice)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().SalePrice)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().DiscountPercentDisplay)
        </th>
    </tr>

@foreach (var item in Model.Products)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.BrandName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.BasePrice)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.SalePrice)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DiscountPercentDisplay)
        </td>
    </tr>
}

</table>

网站.css

/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

th {
    font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-left: 0;
}

    th a {
        display: block;
        position: relative;
    }

    th a:link, th a:visited, th a:active, th a:hover {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }

    th a:hover {
        color: #000;
    }

    th.asc a, th.desc a {
        margin-right: .75em;
    }

    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }

    th.asc a:after {
        content: '▲';
    }

    th.desc a:after {
        content: '▼';
    }

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}

View 模型

public class MedicalProductViewModel
{
    public List<MedicalProductViewModelLineItem> Products { get; private set; }

    public void BuildViewModel(IEnumerable<MedicalProductViewModelLineItem> productsList, IEnumerable<Brand> brandList)
    {
        BuildProductViewModel(productsList, brandList);
    }

    public void BuildViewModel(IEnumerable<MedicalProduct> productsList, IEnumerable<Brand> brandList)
    {
        BuildProductViewModelLineItems(productsList, brandList);
    }

    private IEnumerable<SelectListItem> BuildSelectListItems(IEnumerable<Brand> brandList)
    {              
        return brandList.Select(b => new SelectListItem()
        {
            Text = b.Name,
            Value = b.ID.ToString()
        });
    }

    private void BuildProductViewModel(IEnumerable<MedicalProductViewModelLineItem> productList, IEnumerable<Brand> brandList)
    {
        var medicalProducts = productList.Select(p => new MedicalProduct()
        {
            BrandID = p.BrandID,
            ID = p.ID,
            Name = p.Name,
            BasePrice = p.BasePrice
        });

        BuildProductViewModelLineItems(medicalProducts, brandList);
    }

    private void BuildProductViewModelLineItems(IEnumerable<MedicalProduct> productList, IEnumerable<Brand> brandList)
    {
        Products = productList.Select(p => new MedicalProductViewModelLineItem()
        {
            BrandID = p.BrandID,
            BrandName = brandList.Single(b => b.ID == p.BrandID).Name,
            BrandSelectListItem = BuildSelectListItems(brandList),
            ID = p.ID,
            Name = p.Name,
            BasePrice = p.BasePrice,
            SalePrice = p.BasePrice - (decimal)((double)p.BasePrice * (p.DiscountPercent * 0.01)),
            DiscountPercent = p.DiscountPercent,
            DiscountPercentDisplay = p.DiscountPercent.ToString() + "%"                
        }).ToList();
    }

}

ViewModelLineItem(viewmodel 的成员，表格中每行显示一个)

public class MedicalProductViewModelLineItem
{
    [Key]
    public int ID { get; set; }

    [Required]
    [StringLength(50)]
    public string Name { get; set; }

    [Required]
    [DataType(DataType.Currency)]
    [Display(Name = "Original Price")]
    public decimal BasePrice { get; set; }

    [Required]
    [Range(0, 99)]
    public int DiscountPercent { get; set; }

    // used to display 55% etc.
    [Display(Name = "You Save:")]
    public string DiscountPercentDisplay { get; set; }

    [Required]
    [DataType(DataType.Currency)]
    [Display(Name="Sale Price")]
    public decimal SalePrice { get; set; }

    // is a foreign key
    public int BrandID { get; set; }
    public IEnumerable<SelectListItem> BrandSelectListItem { get; set; }

    [Display(Name="Brand Name")]
    public string BrandName { get; set; }
}

编辑更新:

我的代码现在看起来像这样:

th {
    font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-right: 0;
}
    th:first-child{
        margin-left:0px;
    }
    th:last-child{
        margin-right:0px;
    }

但奇怪的是，网页保持不变。

Answer 1

尝试:

th{
   margin:0 10px;
}
th:first-child{
   margin-left:0px;
}
th:last-child{
   margin-right:0px;
}

或者(更冗长)

th,td{
   padding:0 10px;
}
th:first-child,tr td:first-child{
   padding-left:0px;
}
th:last-child,td td:last-child{
   padding-right:0px;
}