我開始修補 C#。這是我的第一個草根項目。我已經學習 MVC 示例一周了，克服了大部分學習挑戰。我無法掌握的是如何對從數據庫調用返回的數據應用 CSS 格式化策略（除了編寫非?；靵y的特定于調用的 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 關注
- 153 瀏覽
添加回答
舉報
0/150
提交
取消