Таблица CSS - Сочетание выравнивания по центру и левому краю в таблице с распределением по строкам

#html #css #html-table #centering

#HTML #css #html-таблица #центрирование

Вопрос:

Вот моя текущая скрипка:

Заголовки и столбцы Sport, Status и Result я хочу выровнять по центру.
Заголовок и столбцы учетных данных Pick, Genius и Genius я хочу выровнять по левому краю.
Для «выделения» я хочу выровнять по левому краю.

Какой наиболее эффективный способ сделать это?

— Код:

 <div class="geniusPicks">

    <table cellpadding="1" cellspacing="0">

        <thead>
            <tr id="picksHeading">
                <th>Sport</th>
                <th>Status</th>
                <th colspan="2">Pick</th>
                <th>Genius</th>
                <th>Genius Credential</th>
                <th>Result</th>
            </tr>
        </thead>

        <tbody>

            <tr class="bigGap">
                <td colspan="7"></td>
            </tr>

            <tr class="pickHeading">
                <td colspan="7">blah</td>
            </tr>
            <tr class="pickBody">
                <td rowspan="4">plah</td>
                <td rowspan="4">flah</td>
                <td rowspan="4">glah</td>
                <td>vlah</td>
                <td>mlah</td>
                <td>nlah</td>
                <td rowspan="4">jlah</td>
            </tr>
            <tr class="pickBody">
                <td>clah</td>
                <td>dlah</td>
                <td>xlah</td>
            </tr>
            <tr class="pickBody">
                <td>plah</td>
                <td>slah</td>
                <td>klah</td>
            </tr>
            <tr class="pickBody">
                <td>qlah</td>
                <td>wlah</td>
                <td>zlah</td>
            </tr>

            <tr class="smallGap">
                <td colspan="7"></td>
            </tr>

            <tr class="pickHeading">
                <td colspan="7">blah</td>
            </tr>
            <tr class="pickBody">
                <td rowspan="4">plah</td>
                <td rowspan="4">flah</td>
                <td rowspan="4">glah</td>
                <td>vlah</td>
                <td>mlah</td>
                <td>nlah</td>
                <td rowspan="4">jlah</td>
            </tr>
            <tr class="pickBody">
                <td>clah</td>
                <td>dlah</td>
                <td>xlah</td>
            </tr>
            <tr class="pickBody">
                <td>plah</td>
                <td>slah</td>
                <td>klah</td>
            </tr>
            <tr class="pickBody">
                <td>qlah</td>
                <td>wlah</td>
                <td>zlah</td>
            </tr>

            <tr class="smallGap">
                <td colspan="7"></td>
            </tr>

        </tbody>

    </table>

</div>

CSS:

 .geniusPicks {}

.geniusPicks table {width:100%; font-size:12px;}

.geniusPicks table tr#picksHeading {border:1px solid; background-color:red; height:30px;}

.geniusPicks table tr.pickHeading {border:1px solid;}

.geniusPicks table tr.pickBody td {border:1px solid;}

.bigGap td {height:19px;}

.smallGap td {height:10px;}

1. Это форум вопросов и ответов. В чем ваш несубъективный вопрос? Как мы определяем эффективность? Время синтаксического анализа CSS? Количество символов, используемых для кодирования результата? Уровень размытости при просмотре кода / результата?

2. вы имеете в виду выравнивание по горизонтали для тех, которые вы хотите слева?

3. Кроме того, что именно vertical-center означает и vertical-left означает? Это очень двусмысленные фразы.

4. Вы имеете в виду горизонтально слева и вертикально посередине?

Ответ №1:

вы можете либо добавить классы к ячейкам, которые вы хотите центрировать, либо это может сработать для вас,

Рабочий пример

Добавлен CSS:

 .geniusPicks table th,
.geniusPicks table th th th th th th,
.geniusPicks table .pickHeading tr td,
.geniusPicks table .pickHeading tr td td td td td td td {
    text-align: center;
}

.geniusPicks table th th th,
.geniusPicks table .pickHeading tr td td td {
    text-align: left;
}

Этот CSS использует смежный селектор родственных элементов в двух местах

.pickHeading tr — это нацелено только на ячейки, которые находятся в строке, tr которая является непосредственным родственником pickHeading строки — которая является вашей строкой из 7 ячеек, это означает, что меньшие строки, содержащие только 3 ячейки, никогда не становятся целевыми и по умолчанию остаются слева
td — нацелен на каждую ячейку

td td td td td td td — нацелена на каждую ячейку, перед которой есть 6 других (7)

td td td — нацелен на каждую ячейку, перед которой есть 2 других (3,4,5,6,7)

итак, последний пример в # 2 выше отменяет правила для ячеек 3, 4, 5 и 6, но не 7, поскольку второй пример выше более конкретный

Вероятно, это можно было бы сделать с помощью :nth-child to, но этот способ поддерживается IE7 и требует на одно правило меньше!