Итак, я хочу получить таблицу, как на картинке ниже:

enter image description here

Я использовал селекторы first-child и last-child, но похоже, что они выбирают все первые и последние элементы IDK, почему, вот что у меня получилось:

enter image description here

Вот что я пробовал:

<style>
        table {
            border: 1px solid #c4dcf3;
            border-collapse: collapse;
        }

        table :first-child,
        table :last-child {
            background-color: green;
        }

        table tbody:nth-child(odd) {
            background-color: red;
        }
    </style>
<table>
        <thead>
            <tr>
                <th>Country</th>
                <th>OrderID</th>
                <th>Order Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>USA</td>
                <td>1000</td>
                <td>$1,300</td>
            </tr>
            <tr>
                <td>USA</td>
                <td>1001</td>
                <td>$700</td>
            </tr>
            <tr>
                <td>CA</td>
                <td>1002</td>
                <td>$2,000</td>
            </tr>
            <tr>
                <td>CA</td>
                <td>1003</td>
                <td>$1,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Total</td>
                <td></td>
                <td>$5,000</td>
            </tr>
        </tfoot>
    </table>
0
MiiRana 11 Окт 2021 в 10:10

4 ответа

Лучший ответ

:first-child и :last-child необходимо разместить на дочернем элементе -элементы. Поскольку вы бросили его на столы, он искал первую и последнюю таблицы в наборе таблиц, которых, вероятно, не существует.

Вы также можете настроить таргетинг на thead и tfoot для желаемого стиля, который может быть более подходящим.

Тот же принцип применим и к чередующемуся выделению. table > tbody > tr:nth-child(odd)

Я добавил рабочий сниппет.

<style>
        table {
            border: 1px solid #c4dcf3;
            border-collapse: collapse;
        }

        thead,
        tfoot {
            background-color: green;
        }

        table > tbody > tr:nth-child(odd) {
            background-color: red;
        }
    </style>
<table>
        <thead>
            <tr>
                <th>Country</th>
                <th>OrderID</th>
                <th>Order Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>USA</td>
                <td>1000</td>
                <td>$1,300</td>
            </tr>
            <tr>
                <td>USA</td>
                <td>1001</td>
                <td>$700</td>
            </tr>
            <tr>
                <td>CA</td>
                <td>1002</td>
                <td>$2,000</td>
            </tr>
            <tr>
                <td>CA</td>
                <td>1003</td>
                <td>$1,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Total</td>
                <td></td>
                <td>$5,000</td>
            </tr>
        </tfoot>
    </table>
1
D.Schaller 11 Окт 2021 в 07:27

Не настраивайте таргетинг на 1-го / последнего дочернего элемента, если можно просто нацелить thead и tfoot

Также ваш код не работает, потому что он должен быть:

table>*:first-child ,
table>*:last-child {
    background-color: green;
}

Без space

0
NoOorZ24 11 Окт 2021 в 07:14

Вам нужно применить цвет к tr и внести изменения в соответствии с родителем, поскольку вы используете thead, tbody, tfoot. Ваш css не применяется должным образом, потому что вы используете там тег таблицы. table имеет 3 дочерних элемента thead, tbody, tfoot, каждый из которых имеет свои отдельные теги tr в качестве первого и последнего дочерних элементов.

<style>
        table {
            border: 1px solid #c4dcf3;
            border-collapse: collapse;
        }

        thead tr,  tfoot tr{
            background-color: green;
        }
        tbody tr:nth-child(odd) {
            background-color: red;
        }
    </style>
<table>
        <thead>
            <tr>
                <th>Country</th>
                <th>OrderID</th>
                <th>Order Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>USA</td>
                <td>1000</td>
                <td>$1,300</td>
            </tr>
            <tr>
                <td>USA</td>
                <td>1001</td>
                <td>$700</td>
            </tr>
            <tr>
                <td>CA</td>
                <td>1002</td>
                <td>$2,000</td>
            </tr>
            <tr>
                <td>CA</td>
                <td>1003</td>
                <td>$1,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Total</td>
                <td></td>
                <td>$5,000</td>
            </tr>
        </tfoot>
    </table>
0
Yogendra 11 Окт 2021 в 07:33
        table {
            border: 1px solid #c4dcf3;
            border-collapse: collapse;
        }

        thead,
        tfoot {
            background-color: #4e81e7;
        }

        
        tr:nth-child(even) {background-color: #f2f2f2;}
<table>
        <thead>
            <tr>
                <th>Country</th>
                <th>OrderID</th>
                <th>Order Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>USA</td>
                <td>1000</td>
                <td>$1,300</td>
            </tr>
            <tr>
                <td>USA</td>
                <td>1001</td>
                <td>$700</td>
            </tr>
            <tr>
                <td>CA</td>
                <td>1002</td>
                <td>$2,000</td>
            </tr>
            <tr>
                <td>CA</td>
                <td>1003</td>
                <td>$1,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Total</td>
                <td></td>
                <td>$5,000</td>
            </tr>
        </tfoot>
    </table>
-1
Aman Sharma 11 Окт 2021 в 07:19