Блог

Главная - Вопросы по программированию - Как выровнять элементы td html-таблицы в противоположном (правом) конце экрана

Как выровнять элементы td html-таблицы в противоположном (правом) конце экрана

#html #html-table

#HTML #html-таблица

Вопрос:

У меня есть изображение в верхнем левом углу экрана, но я хочу разместить текст на равномерно противоположной стороне (вверху справа). Но этот код позиционирует последующие элементы td лишь немного правее и немного ниже. Нужно ли добавлять выравнивание к <td> элементам?

 <table>
  <tr>
    <td><img src="some_img" style='width:50%; height:50%;' />
      <td style="vertical-align:bottom;">t1</td>
  </tr>
  <tr>
    <td></td>
    <td>t2</td>
  </tr>
  <tr>
    <td></td>
    <td>t3</td>
  </tr>
</table>

Ответ №1:

Отсутствует одно закрытие td , кроме этого, вы можете использовать text-align свойство css для выравнивания элементов внутри ячейки.

Если я правильно понимаю, вы можете захотеть что-то вроде этого:

 .cell{
  width: 50vw;
  background: #ccc;
  text-align: right;
}

.image{
  width:50%;
  height:50%;
  text-align: left;
}  
 <table>
  <tr>
    <td class="cell image"><img src="some_img"/></td>
    <td class="cell">t1</td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell">t2</td>
  </tr>
  <tr>
    <td class="cell"></td>
    <td class="cell">t3</td>
  </tr>
</table>

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

1. Это близко к этому! Но могут ли t2 и t3 выровняться под t1?

2. Конечно, просто добавьте cell класс к другим td , я изменил ответ.

3. Да! И избавиться от серого фона?

4. Это просто помощник, чтобы увидеть, что происходит, просто удалите background prop из cell класса, если он вам не нужен. Должен ли я удалить это из ответа?

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