Выравнивание данных внутри столбца таблицы

Question

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

    <table cellspacing="0" celpadding="0">
<thead>
  <tr>
    <th>Property</th>
    <th>Value</th>
  </tr>
</thead>
<tbody>
  <tr>
  <td>
    <div>Property 1</div>
    <div>Property 2</div>
    <div>Property 3</div>
    <div>Property 4</div>
  </td>
  <td>
    <div>Value 1</div>
    <div>Value 2</div>
    <div>Value 3</div>
    <div>Value 4</div>
  </td>
</tr>
<tr>
  <td>Property 2</td>
  <td>Value 2</td>
</tr>
<tr>
  <td>Property 1</td>
  <td>Property 1</td>
</tr>
</tbody>
</table>
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color:#fff;
}

table{
  width:100px
}
table tr td,table tr th{border:1px solid #fff;padding:5px;}
table tr td div{
  border-bottom:1px solid #eee;
  padding:5px 0;
}

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

Answer 1

Что не так с использованием классической таблицы без случайных divs, содержащихся в ваших td элементах?Рассмотрим следующее:

<table cellspacing="0">
  <tr>
    <td>Property 1</td>
    <td>Value 1</td>
   </tr>
  <tr>
    <td>Property 2</td>
    <td>Value 2</td>
   </tr>
  <tr>
    <td>Property 3</td>
    <td>Value 3</td>
  </tr>
  <tr>
    <td>Property 4</td>
    <td>Value 4</td>
  </tr>
</table>

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color:#fff;
}

table{
  width:200px
}
td {
  width:100px;
  padding:10px;
  border:1px solid white;
}

Вот скрипка: https://jsfiddle.net/8dyxqbkz/2/

Answer 2

Вы должны использовать тег <tr><tr/> для строки таблицы и тег <td><td/> для ячейки таблицы.

Позвольте мне показать пример:

<table cellspacing="0" celpadding="0">
<tr>
  <td>
    Property 1
  </td>
  <td>
    Property 2
  </td>
  <td>
    Property 3
  </td>
  <td>
    Property 4
  </td>  
</tr>
<tr>  
    <td>Value 1</td>
    <td>Value 2</td>
    <td>Value 3</td>
    <td>Value 4</td>  
</tr>
<tr>
  <td>Property 2</td>
  <td>Property 1</td>
</tr>
<tr>
  <td>Value 2</td>
  <td>Property 1</td>
</tr>
</table>

Answer 3

Самый простой способ решить вашу проблему - это добавить фиксированный height к вашим table tr td div правилам, чтобы он правильно выровнялся. Таким образом, вы можете обновить это конкретное правило на что-то вроде:

table tr td div{
  border-bottom: 1px solid #eee;
  padding: 5px 0;
  height: 48px;
}

Однако, <div> не должны входить в таблицы. Возможно, вам нужно переосмыслить структуру таблицы, так как это наверняка будет иметь проблемы с доступностью.