Вертикальное выравнивание текста в ячейке таблицы


вот часть моей таблицы (это форма):

это всего лишь два <td> ' s В a <tr>. Я пытаюсь получить описание вверх, в верхнюю часть ячейки таблицы, а не на дно.

Как я могу это сделать?

6 53

6 ответов:

td.description {vertical-align: top;}

здесь description - это имя класса td С текстом

td.description {
  vertical-align: top;
}
<td class="description">Description</td>

или inline (yuk!)

<td style="vertical-align: top;">Description</td>

попробовать

td.description {
  line-height: 15px
}
<td class="description">Description</td>

установите значение высоты линии в нужное значение.

у меня была такая же проблема, но я решил ее с помощью !important. Я забыл о наследстве в CSS. Просто совет, чтобы проверить в первую очередь.

Если вы используете Bootstrap, пожалуйста, добавьте следующие настройки стиля для вашей таблицы:

.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th {
      vertical-align: middle;
 }

valign="top" должен сделать работу.

<tr>
  <td valign="top">Description</td>
</tr>

просто добавьте вертикальное выравнивание:верх для первого td нужен не для всех td.

tr>td:first-child {
  vertical-align: top;
}
<tr>
  <td>Description</td>
  <td>more text</td>
</tr>