我开始修补 C#。这是我的第一个草根项目。我已经学习 MVC 示例一周了，克服了大部分学习挑战。我无法掌握的是如何对从数据库调用返回的数据应用 CSS 格式化策略（除了编写非常混乱的特定于调用的 HTML）。我将使用 w3schools.com ( https://www.w3schools.com/css/tryit.asp?filename=trycss_table_border_divider ) 中的示例作为示例，因为它包含得很好。使用此示例，我希望能够左对齐第一列，居中第二列，并使用# ##0.00值列的格式右对齐。我假设我需要在这段代码中做一些事情来区分第 1、2 和 3 列（但找不到它是什么）：th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd;}来自 w3schools.com 的完整代码清单如下：<!DOCTYPE html><html><head><style>table { border-collapse: collapse; width: 100%;}th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd;}</style></head><body><h2>Bordered Table Dividers</h2><p>Add the border-bottom property to th and td for horizontal dividers:</p><table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr></table></body></html>我正在研究的教程就是这个，但是我已经解决了这个示例中我可以做的事情（所以它可能应该被忽略） https://learn.microsoft.com/en-us/aspnet/core/tutorials/first- mvc-app/adding-model?view=aspnetcore-3.1&tabs=visual-studio-mac
1 回答
墨色风雨
TA贡献1853条经验 获得超6个赞
我添加了一些演示 CSS 来展示如何解决这个引用问题。单击“运行”按钮查看其运行情况。
尽管您可以将类添加到每个标记上，但指定所需<td>的子标记会更容易。tr为此，您可以使用伪类first-child、nth-child和last-child。我在您的示例中添加了一些随机格式 - 我将把具体的格式定义留给您。
您当然可以用于nth-child所有这些。通常，编程中的枚举从零开始（“零索引”），但此类是一索引的。因此，first-child我可以用fornth-child(1)来代替。以类似的方式，last-child可以在这里写为nth-child(3)，但在某些情况下可能不太容易维护，因为如果你想插入一列，你也必须调整最右边一列的 CSS。
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
table tr td:first-child {
font-weight: bold;
color: red;
}
table tr td:nth-child(2) {
font-size: 0.8em;
color: purple;
}
table tr td:last-child {
font-style: italic;
color: green;
}
</style>
</head>
<body>
<h2>Bordered Table Dividers</h2>
<p>Add the border-bottom property to th and td for horizontal dividers:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
- 1 回答
- 0 关注
- 119 浏览
添加回答
举报
0/150
提交
取消