将内联css移动到定义中

Question

当前视图代码如下所示。从技术上讲，代码更多，因为使用了部分视图，其中列出了header2和data2，但在这些部分视图中使用了相同的基本表。

问题在于我不知道如何将以下内联属性转换为css定义：

width="150px"
valign="top" (I know valign is deprecated - it's only property works there - I don't know why.)

观看代码：

<table class="confSummaryTable">
    <tr>
        <th width="150px">
            header1
        </th>
        <th>
            header2
        </th>
    </tr>
    @For Each item In Model
        @<tr>
            <td valign="top">
                data1
            </td>
            <td>
                data2
            </td>
        </tr>
    Next

这是表格定义：

confSummaryTable {
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
}

confSummaryTable th, td {
    column-width: 150px;
    vertical-align:text-top;
    vertical-align:top;
}

这是表格显示的显示方式：

您可以看到width和valign属性应用于第一列，因为它们是内联显式定义的，但后面的列并未获取我尝试创建的定义。如果我删除了第一列的内嵌属性，它将恢复为垂直居中，并且还有足够的宽度来显示。

下图显示了在后续部分视图中使用内联属性时表的外观。

如何编写css表定义，以便在视图显示时应用内联属性？这是一个使用bootstrap css的MVC5 Web项目。上面的表定义在site.css中。

Answer 1

根据您的HTML代码，这可能与包含的内联样式具有相同的效果：

.confSummaryTable th:first-of-type {
   width: 150px;
}
.confSummaryTable td:first-child {
  vertical-align: top;
}

但我不确定你添加的第二条CSS规则与它有什么关系..

评论后添加了解释：

td:first-child仅适用于td个元素，这些元素是其容器中的第一个元素（在您的情况下是表格行/ tr） - 每个 td这是.confSummaryTable内某地的第一个孩子。所以这适合你的HTML。

关于th:first-of-type：您实际上也可以在这里使用first-child - 这两个通常是可以互换的，但first-of-type与标签类型相关，即th。如果在第一行th之前的第一行中有另一个元素（这在表格中甚至不是无效的话），这也适用，在这种情况下，它不会是第一个孩子，但仍然是第一种类型。