HTML, table. Ровное отображение

Question

             <div class="info">
                <table>
                    <tr>
                    <td>
                        Cтатус:
                        <div class="right-align">Игрок</div>
                    </td>
                    <td>
                        Отыграно:
                        <div class="right-align">
                            125
                            часов
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        Организация:
                        <div class="right-align">LSPD</div>
                    </td>
                    <td>
                        Профессия:
                        <div class="right-align">Старший майор</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        Проживание:
                        <div class="right-align">Улица 20 брит</div>
                    </td>
                    <td>
                        Бизнес:
                        <div class="right-align">24/7 магазин</div>
                    </td>
                </tr>
                </table>
            </div>

Приветствую. Не понимаю как реализовать, чтобы div был справа от текста и был на ровне, а не под текстом. Буду рад фидбеку на счёт этого. Пытался через css сделать, но поменять можно отступ слева только

Answer 1

У вас два основных пути:

отказаться от div в пользу span (который для этого и предназначен, когда речь идёт о семантике строки) и html всё сделает за вас сам, кроме пространства между элементами. На этот случай издревле существует выравнивание float. Но если почему-то div так важен для вас, то уберите у него "блочность" и будет без разницы.

.info_div div {
  display: inline-block;
  padding-left: 8px;
  float: right;
  color: red;
}

.info_span span {
  padding-left: 8px;
  float: right;
  color: darkgreen;
}

<div class="info_div">
  <table border="1">
    <tr>
      <td>Cтатус:<div>Игрок</div></td>
      <td>Отыграно:<div>125 часов</div></td>
    </tr>
    <tr>
      <td>Организация:<div>LSPD</div></td>
      <td>Профессия:<div>Старший майор</div></td>
    </tr>
    <tr>
      <td>Проживание:<div>Улица 20 брит</div></td>
      <td>Бизнес:<div>24/7 магазин</div></td>
    </tr>
  </table>
</div>

<br>

<div class="info_span">
  <table border="1">
    <tr>
      <td>Cтатус:<span>Игрок</span></td>
      <td>Отыграно:<span>125 часов</span></td>
    </tr>
    <tr>
      <td>Организация:<span>LSPD</span></td>
      <td>Профессия:<span>Старший майор</span></td>
    </tr>
    <tr>
      <td>Проживание:<span>Улица 20 брит</span></td>
      <td>Бизнес:<span>24/7 магазин</span></td>
    </tr>
  </table>
</div>
<br>

При более сложных наборах внутри ячейки таблицы можно ещё воспользоваться и flex, но здесь он вам явно ни к чему.

P.S. Что касается того, что табличка которую вы привели в виде рисунка и её одно-колончатости... и если вам нужно именно в таком виде, то и перестройте table как должно, а не приводите в виде примера что попало.

.info span {
  padding-left: 24px;
  float: right;
  color: darkgreen;
}

<div class="info">
  <table border="1">
    <tr><td>Cтатус:<span>Игрок</span></td></tr>
    <tr><td>Отыграно:<span>125 часов</span></td></tr>
    <tr><td>Организация:<span>LSPD</span></td></tr>
    <tr><td>Профессия:<span>Старший майор</span></td></tr>
  </table>
</div>

БЛОГ НА HUSL

HTML, table. Ровное отображение

Ответы (1 шт):