我有一個在表列中設(shè)置值的代碼，現(xiàn)在顯示的文本具有黑色，但我想突出顯示具有藍(lán)色背景的文本下面是我當(dāng)前的 HTML 代碼 <body> <div class="container"> <table class="table table-responsive-sm table-bordered border-dark"> <caption style="caption-side: top;"> <h2 style="color:red">Country wise live updates</h2> </caption> <thead> <tr> <th scope="col">Country</th> <th scope="col">Total Affected</th> <th scope="col">Deaths</th> </tr> </thead> <tbody> <tr> <td>{{data.country}}</td> <td>{{data.total}}</td> <td>{{data.deaths}}</td> </tr> </tbody> </table> </div> </body>電流輸出：預(yù)計僅突出顯示文本部分。我想顯示輸出，如下所示：
3 回答
慕標(biāo)琳琳
TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個贊
用類將值包裝在跨度中。
.table-cell-blue {
display: inline-block;
background-color: deepskyblue;
}
<body>
<div class="container">
<table class="table table-responsive-sm table-bordered border-dark">
<caption style="caption-side: top;">
<h2 style="color:red">Country wise live updates</h2>
</caption>
<thead>
<tr>
<th scope="col"><span class="table-cell-blue">Country</span></th>
<th scope="col">Total Affected</th>
<th scope="col">Deaths</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{data.country}}</td>
<td>{{data.total}}</td>
<td>{{data.deaths}}</td>
</tr>
</tbody>
</table>
</div>
</body>
弒天下
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超8個贊
如果您不想要整個列，您可以使用 :first-child 或 :nth-child(number) 來選擇該列中您想要的任意數(shù)量，并且我已為每個 td 列提供了自己的類，以便您可以選擇哪些您想要為每一列選擇
<style>
.td-Country:nth-child(2){
background-color: dodgerblue;
}
</style>
<div class="container">
<table class="table table-responsive-sm table-bordered border-dark">
<caption style="caption-side: top;">
<h2 style="color:red">Country wise live updates</h2>
</caption>
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Total Affected</th>
<th scope="col">Deaths</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td-Countryt">{{data.country}}</td>
<td class="td-Total">{{data.total}}</td>
<td class="td-Deaths">{{data.deaths}}</td>
</tr>
</tbody>
</table>
</div>
侃侃爾雅
TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超16個贊
您只需為一個類創(chuàng)建一個樣式，然后更改該類的背景顏色：
<style>
.highlighted {
background-color: blue;
display: inline-block;
}
</style>
然后，您可以將該類應(yīng)用于您想要突出顯示為藍(lán)色的任何元素。
- 3 回答
- 0 關(guān)注
- 120 瀏覽
添加回答
舉報
0/150
提交
取消