Siehe unten CSS

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

Ich möchte nur wissen, wie ich einen Stil anwenden kann, der für alle tr außer last tr oder tfoot angewendet wird. führe mich mit dieser Art von CSS.

Unter HTML befindet sich ein Beispiel-HTML für meine Tabelle.

<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>

Vielen Dank

0
Thomas 30 Dez. 2015 im 18:00

2 Antworten

Beste Antwort

Verwenden Sie den anderen Selektor wie folgt, der tfoot nicht enthält:

.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;
}

Sie belassen auch das .webgrid-table bei der zweiten Regel, sodass es für alle Tabellen gilt, tr:first-child. Außerdem habe ich :nth-child(1) durch kompatibleres :first-child ersetzt.

1
Praveen Kumar Purushothaman 30 Dez. 2015 im 15:04

Sie können den Selektor :not verwenden, mit dem Sie angeben können, welche Elemente nicht formatiert werden sollen. Weitere Informationen

table > *:not(tfoot){
  color: red;
}

tr:not(:last-child) {
  background: yellow;
}
<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>
1
cocoa 30 Dez. 2015 im 15:12