html - 将内联 css 移动到定义中

Question

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

问题是我不知道如何将以下内联属性转换为 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 属性应用于第一列，因为它们是内联明确定义的，但后面的列没有采用定义我试着创造。如果我删除了第一列的行内属性，它会恢复为垂直居中，宽度也刚好足以显示。

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

如何编写 css 表定义以便在 View 显示时应用内联属性？这是一个使用 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 中某处的第一个 child 。所以这适合您的 HTML。

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