将内联css移动到定义中

时间:2017-12-12 22:07:58

标签: html css twitter-bootstrap css-selectors

当前视图代码如下所示。从技术上讲,代码更多,因为使用了部分视图,其中列出了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;
}

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

enter image description here

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

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

enter image description here

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

1 个答案:

答案 0 :(得分: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之前的第一行中有另一个元素(这在表格中甚至不是无效的话),这也适用,在这种情况下,它不会是第一个孩子,但仍然是第一种类型。