如何设置 <MvcMovie.Models.Movie> 示例中各个 <td> 列的格式
我开始修补 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回答
-
墨色风雨
我添加了一些演示 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>
随时随地看视频慕课网APP
相关分类
Html5