当前视图代码如下所示。从技术上讲,代码更多,因为使用了部分视图,其中列出了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中。
答案 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
之前的第一行中有另一个元素(这在表格中甚至不是无效的话),这也适用,在这种情况下,它不会是第一个孩子,但仍然是第一种类型。