Html CSS выравнивание текста внутри div по номерам

Question

Не совсем уверен, как задать этот конкретный c вопрос, но вот что я пытаюсь сделать.

Проблема:

У меня есть таблица вопросов и вариантов ответов:

<table>
   <tr>
      <th>Question</th>
      <th>Answer</th>
   </tr>
   <tr>
      <td><div style="display: inline;">1. </div> <div style="display: inline;">asdf asdf asasdf <br/> asdf asdf </div></td>
      <td>Yes Or No</td>
   </tr>
</table>

Я хочу, чтобы вопрос отображался в формате:

1. asdfasdf asd ad asdf asdf asdf

Что я получаю:

Теги br, которые можно смоделировать при получении вопроса слишком длинный и текст оборачивается снизу. Как вы можете видеть, когда это происходит, он оборачивается под 1. Я хочу, чтобы текст был перенесен в вышеуказанный формат.

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

Упорядоченная версия списка, которую я попробовал:

<table>
   <tr>
      <th>Question</th>
      <th>Answer</th>
   </tr>
   <tr>
      <td><ol><li value="1">asdf asdf asdf <br/> asdf asdf</li></ol></td>
      <td>Yes Or No</td>
   </tr>
</table>

Я не совсем эксперт в CSS, поэтому любая помощь будет оценена, я понятия не имею, что даже искать в Интернете для этого, так как я даже не уверен, что правильный термин, чтобы сделать что-то подобное.

Спасибо!

Answer 1

Я добавил класс вместо встроенного стиля. Просто сделайте число и текст div inline-block, чтобы он занимал одинаковую высоту, а текст не будет go ниже числа. Также добавлен класс для td для хранения текста сверху.

.number, .text {
  display:inline-block;
  vertical-align:top;
  }
  
td {
vertical-align: top;
}

<table>
   <tr>
      <th>Question</th>
      <th>Answer</th>
   </tr>
   <tr>
      <td><div class="number">1. </div> <div class="text">asdf asdf asasdf <br/> asdf asdf </div></td>
      <td>Yes Or No</td>
   </tr>
</table>

Answer 2

Самый простой метод: используйте <ol> (нумерованный список) внутри вашей ячейки

Он выравнивает текст с или без разрывов.

A скрипка

Answer 3

Ответ-1 (согласно вашему требованию)

с приведенным ниже стилем, вы достигнете требования. inline только заставляет элемент находиться в линии, пока он не подчиняется высоте и ширине. Таким образом, с помощью inline-block мы можем получить как блочное, так и встроенное поведение.

.numbers,.row-data{
  display:inline-block;
  vertical-align:middle;
  padding-right:10px;
}

.numbers{
  padding-right:10px;
}

code-1

table{
  width:50vw;
  margin:auto;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

table .table-header{
  background-color:#ccc;
  padding:8px;
  
}
td{
  padding:10px;
}
.numbers,.row-data{
  display:inline-block;
  vertical-align:middle;
  padding-right:10px;
}

.numbers{
  padding-right:10px;
}

<table>
   <tr>
      <th>Question</th>
      <th>Answer</th>
   </tr>
   <tr>
      <td>
        <div  class='numbers'>1. </div> 
        <div class='row-data'>asdf asdf asasdf <br/> asdf asdf </div>         </td>
      
     <td>Yes Or No</td>
   
  </tr>
</table>

Ответ-2 (небольшие изменения)

Пожалуйста, обратитесь к приведенному ниже коду. кодовая ссылка

table{
  width:50vw;
  margin:auto;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

table .table-header{
  background-color:#ccc;
  padding:8px;
  
}
td{
  padding:10px;
}
.row-numbering{
  min-width:15px;
  text-align:center;
}
.question{
  width:60%;
}
.answer{
  width:40%;
}

<table>
   <tr class='table-header'>
     <th class='row-numbering'></th>
      <th class='question'>Question</th>
      <th class='answer'>Answer</th>
   </tr>
   <tr>
     <td class='row-numbering'>1</td>
      <td class='question'>
        asdf asdf asasdf <br/>asdf asdf asdf
     </td>
      <td class='answer'>Yes Or No</td>
   </tr>
  <tr>
     <td class='row-numbering'>2</td>
      <td class='question'>
        asdf asdf asasdf <br/>bsdf asdf asdf
     </td>
      <td class='answer'>Yes Or No</td>
   </tr>
  <tr>
     <td class='row-numbering'>3</td>
      <td class='question'>
        asdf asdf asasdf <br/>csdf asdf asdf
     </td>
      <td class='answer'>Yes Or No</td>
   </tr>
</table>