我開始修補(bǔ) C#。這是我的第一個(gè)草根項(xiàng)目。我已經(jīng)學(xué)習(xí) MVC 示例一周了，克服了大部分學(xué)習(xí)挑戰(zhàn)。我無法掌握的是如何對(duì)從數(shù)據(jù)庫調(diào)用返回的數(shù)據(jù)應(yīng)用 CSS 格式化策略（除了編寫非常混亂的特定于調(diào)用的 HTML）。我將使用 w3schools.com ( https://www.w3schools.com/css/tryit.asp?filename=trycss_table_border_divider ) 中的示例作為示例，因?yàn)樗煤芎?。使用此示例，我希望能夠左?duì)齊第一列，居中第二列，并使用# ##0.00值列的格式右對(duì)齊。我假設(shè)我需要在這段代碼中做一些事情來區(qū)分第 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>我正在研究的教程就是這個(gè)，但是我已經(jīng)解決了這個(gè)示例中我可以做的事情（所以它可能應(yīng)該被忽略） https://learn.microsoft.com/en-us/aspnet/core/tutorials/first- mvc-app/adding-model?view=aspnetcore-3.1&tabs=visual-studio-mac
1 回答
墨色風(fēng)雨
TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超6個(gè)贊
我添加了一些演示 CSS 來展示如何解決這個(gè)引用問題。單擊“運(yùn)行”按鈕查看其運(yùn)行情況。
盡管您可以將類添加到每個(gè)標(biāo)記上，但指定所需<td>的子標(biāo)記會(huì)更容易。tr為此，您可以使用偽類first-child、nth-child和last-child。我在您的示例中添加了一些隨機(jī)格式 - 我將把具體的格式定義留給您。
您當(dāng)然可以用于nth-child所有這些。通常，編程中的枚舉從零開始（“零索引”），但此類是一索引的。因此，first-child我可以用fornth-child(1)來代替。以類似的方式，last-child可以在這里寫為nth-child(3)，但在某些情況下可能不太容易維護(hù)，因?yàn)槿绻阆氩迦胍涣校阋脖仨氄{(diào)整最右邊一列的 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 關(guān)注
- 171 瀏覽
添加回答
舉報(bào)
0/150
提交
取消