如何格式化 <MvcMovie.Models.Movie> 示例中的各个 <td> 列答案

【问题标题】：How to format the individual <td> columns in the <MvcMovie.Models.Movie> example如何格式化 <MvcMovie.Models.Movie> 示例中的各个 <td> 列
【发布时间】：2020-04-01 14:30:33
【问题描述】：

我开始修补 C#。这是我的第一个草根项目。

我已经研究了一周的 MVC 示例，并克服了我的大部分学习挑战。我无法掌握的是如何对从 DB 调用返回的数据应用 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://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/adding-model?view=aspnetcore-3.1&tabs=visual-studio-mac

【问题讨论】：

标签： html css formatting

【解决方案1】：

我添加了一些演示 CSS 来展示如何解决这个引用问题。单击“运行”按钮以查看它的运行情况。

虽然您可以在每个<td> 标记上添加类，但更容易指定您想要的tr 的哪个子项。为此，您可以使用伪类first-child、nth-child 和last-child。我在您的示例中添加了一些随机格式 - 我将把具体的格式定义留给您。

您当然可以对所有这些使用nth-child。通常，编程中的枚举从零开始（“零索引”），但这个类是单索引的。因此，对于first-child，我可以改用nth-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>

进一步阅读

使用的类：

这些都是具有特殊含义的伪类。您可以在此处了解更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

【讨论】：

这是一个非常聪明的解决方案 - 谢谢。我在此期间创建了一个类，并将该类应用于各个单元格。但是，您的解决方案允许我简单地使用列号偏移量 - 一种将其扩展到我正在努力的实际应用程序的更简化的方式。
不用担心@RobertAustin，很高兴帮助:-)