Блог

Главная - Вопросы по программированию - вертикальное выравнивание и коррекция не работают в таблице!

вертикальное выравнивание и коррекция не работают в таблице!

#html #css

#HTML #css

Вопрос:

Я динамически генерирую таблицу с помощью AJAX. Структура таблицы, которая должна быть заполнена, выглядит следующим образом:

 <table id="foobar"  style="width:100%">
    <thead>
        <tr>
            <th style="width:20%;"></th>
            <th style="width:55%;"></th>
            <th title="widget name">Name</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Данные ячейки содержат либо:

  • изображение
  • оболочка div с тегами привязки и абзацами

Я попробовал следующее:

  1. настройка valign="top" (отдельно) на уровнях table , th и tr — это не имело никакого эффекта
  2. настройка style="vertical-align: top;" (отдельно) на уровнях table , th и tr — это не имело никакого эффекта

Я не хочу устанавливать свойство align на уровне ячейки, потому что это вызовет слишком большое ненужное раздувание, если таблица содержит несколько (скажем, сотни) строк.

Как я могу заставить таблицу выровнять содержимое ее ячеек по вертикали сверху (учитывая, что ячейки содержат блочные элементы?

Комментарии:

1. valign должно работать, несмотря ни на что. Вы проверили свой общий файл CSS, что он определяет для TH элементов?

2. @Роберт Коритник: вы были правы. в моем основном файле CSS был установлен td { vertical-align: bottom}. Я исправил это благодаря вашему предложению

3. Хм, я полагаю, мне следует включить это в ответ, и вы сможете это принять. 🙂 Так я и сделал. Вы можете найти мой ответ ниже.

Ответ №1:

Вот базовый пример таблицы с тегами TH и TD, где для содержимого задано значение «выравнивание по вертикали: сверху».

Демонстрация: http://jsfiddle.net/HAQ3s/472

 th, td {
    vertical-align: top;
}
  
 <table>
    <tr>
        <th>A<br /><br /></th>
        <th>B</th>
        <th>C</th>
    </tr>
    <tr>
        <td>1<br /><br /></td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

Комментарии:

1. Почему не либо table th, table td или th, td ? Я бы либо ограничил оба параметра внутри таблицы, либо ни одного — внутри таблицы. (Учитывая эту конкретную ситуацию, я бы просто убрал table .)

2. Да, они работают. Итак, зачем вам сбивать читателя с толку, используя два разных подхода в одном и том же селекторе?

Ответ №2:

valign должно работать независимо ни от чего, если все настройки, которые мы видим здесь, являются теми, которые используются на самом деле.

Глобальные настройки CSS

Но я подозреваю, что здесь другой стрелок. Вы проверили свой глобальный файл CSS, что он определяет для TH элементов? Возможно, именно это вызывает у вас головную боль.

Комментарии:

1. Следует отметить, что valign устарел.

2. @wdm: тогда используйте CSS. Но имейте в виду, что у вас могут быть некоторые глобальные настройки CSS (которые также переопределяют valign ).

3. Особенно, если вы используете готовый шаблон. В том, над которым я работал, вверху был фрагмент css, который настраивал выравнивание практически каждого тега по базовой линии. Я дернул за это, и все встало на свои места.

Ответ №3:

Чтобы изменить ячейки так, как вы хотите, вам нужно установить выравнивание на уровне ячеек. Поскольку вы не хотите делать это для каждого отдельного элемента, вам нужно подумать о добавлении раздела css / style на вашу страницу. Вот пример определения того, что вам нужно — обычно это находится в разделе head или в отдельном файле, но вы могли бы даже поместить это непосредственно перед тегом «< table».

 <style type="text/css">
td {
  vertical-align: top;
}
</style>

Комментарии:

1. Вам следует отредактировать css, чтобы также включить th s, с чем и возится OP.

Ответ №4:

 tr {vertical-align: top;}

у меня работает с вашим примером кода, возможно, вам нужно посмотреть, выполняется ли сброс или что-то еще, явно устанавливающее выравнивание по вертикали в среднее или нижнее положение на td s

в этом случае что-то вроде 

 tr td {vertical-align: top;}

также должно сработать, чтобы сделать селектор более конкретным, хотя в вашем реальном случае использования может потребоваться больше, в зависимости от того, что вызывает td отмену tr настройки

Ответ №5:

В моем случае я дал !important , поэтому это не сработало. Как только я удалил это вертикальное выравнивание, оно работает отлично.

 th, td {
    vertical-align: top; //Don't use !important keyword.
}

Надеюсь, это кому-то поможет.