gpt4 book ai didi

html - 如何应用将被 tfoot 或 last TR 忽略的 CSS 样式

转载 作者:太空宇宙 更新时间:2023-11-04 02:42:15 24 4
gpt4 key购买 nike

看下面的CSS

.webgrid-table td:nth-child(1),th:nth-child(1)
{
display:none
}

我只是想知道如何应用一种样式,该样式将应用于除 last trtfoot 之外的所有 tr。用那种 CSS 指导我。

下面的 html 是我的表格的示例 html。

<table class="webgrid-table" data-swhgajax="true" data-swhgcontainer="gridContent" data-swhgcallback="initScripts">
<thead>
<tr class="webgrid-header">
<th scope="col">
<a data-swhglnk="true" href="http://localhost:13562/WebGrid_Sample2/Show2?sort=ID&amp;sortdir=DESC&amp;page=1">ID ▲</a>
</th>
<th scope="col">
<a data-swhglnk="true" href="http://localhost:13562/WebGrid_Sample2/Show2?sort=FirstName&amp;sortdir=ASC&amp;page=1">First Name</a>
</th>
<th scope="col">
<a data-swhglnk="true" href="http://localhost:13562/WebGrid_Sample2/Show2?sort=LastName&amp;sortdir=ASC&amp;page=1">Last Name</a>
</th>
<th scope="col">
<a data-swhglnk="true" href="http://localhost:13562/WebGrid_Sample2/Show2?sort=StateName&amp;sortdir=ASC&amp;page=1">State Name</a>
</th>
<th scope="col">
<a data-swhglnk="true" href="http://localhost:13562/WebGrid_Sample2/Show2?sort=CityName&amp;sortdir=ASC&amp;page=1">City Name</a>
</th>
<th scope="col">
IsActive
</th>
</tr>
</thead>
<tfoot>
<tr class="webgrid-footer">
<td colspan="6">
<div id="content">

<div id="pager">
<ul class="paginate pag5 clearfix">
<li class="single">Page 5 of 5 of 50</li>
<li class="navpage"><a href="http://localhost:13562/SamplePager/Index">prev</a></li>
<li class="navpage"><a href="http://localhost:13562/SamplePager/Index">next</a></li>
<li><a href="http://localhost:13562/SamplePager/Index">1</a></li>
<li><a href="http://localhost:13562/SamplePager/Index">2</a></li>
<li><a href="http://localhost:13562/SamplePager/Index">3</a></li>
<li><a href="http://localhost:13562/SamplePager/Index">4</a></li>
<li><a href="http://localhost:13562/SamplePager/Index">5</a></li>
<li class="current">6</li>
<li class="navpage"><a href="">next</a></li>
<li class="navpage"><a href="">last</a></li>
<li class="single"><div id="loader">Loading....</div></li>
</ul>
</div>


</div>
</td>
</tr>
</tfoot>
<tbody>
<tr class="webgrid-row-style">
<td class="SmallCols">1</td>
<td class="NameColWidth">Amit</td>
<td class="NameColWidth">Ghosh</td>
<td class="NameColWidth">West Bengal</td>
<td class="NameColWidth">Kolkata</td>
<td class="text-center checkbox-width SmallCols">
<input type="checkbox" id="select" class="box" name="select" checked="'checked'" value="True">
</td>
</tr>
<tr class="webgrid-alternating-row">
<td class="SmallCols">2</td>
<td class="NameColWidth">Tridip</td>
<td class="NameColWidth">Bhattacharjee</td>
<td class="NameColWidth">Bihar</td>
<td class="NameColWidth">DharBganga</td>
<td class="text-center checkbox-width SmallCols">
<input type="checkbox" id="select" class="box" name="select" checked="'checked'" value="True">
</td>
</tr>
<tr class="webgrid-row-style">
<td class="SmallCols">3</td>
<td class="NameColWidth">Dipyendu</td>
<td class="NameColWidth">Majumdar</td>
<td class="NameColWidth">Orissa</td>
<td class="NameColWidth">Puri</td>
<td class="text-center checkbox-width SmallCols">
<input type="checkbox" id="select" class="box" name="select" value="False">
</td>
</tr>
<tr class="webgrid-alternating-row">
<td class="SmallCols">4</td>
<td class="NameColWidth">Arijit</td>
<td class="NameColWidth">Banerjee</td>
<td class="NameColWidth">West Bengal</td>
<td class="NameColWidth">Barrack Pore</td>
<td class="text-center checkbox-width SmallCols">
<input type="checkbox" id="select" class="box" name="select" value="False">
</td>
</tr>
<tr class="webgrid-row-style">
<td class="SmallCols">5</td>
<td class="NameColWidth">Madhabi</td>
<td class="NameColWidth">Sinha</td>
<td class="NameColWidth">West Bengal</td>
<td class="NameColWidth">Ranaghat</td>
<td class="text-center checkbox-width SmallCols">
<input type="checkbox" id="select" class="box" name="select" checked="'checked'" value="True">
</td>
</tr>
</tbody>
</table>

谢谢

最佳答案

像这样使用不同的选择器,它不包括 tfoot:

.webgrid-table thead td:first-child,
.webgrid-table thead th:first-child,
.webgrid-table tbody td:first-child,
.webgrid-table tbody th:first-child {
display: none;
}

您还在第二条规则中保留了 .webgrid-table,因此它适用于所有表,tr:first-child。我还用更兼容的 :first-child 替换了 :nth-child(1)

关于html - 如何应用将被 tfoot 或 last TR 忽略的 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34531887/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com