Как иметь два параллельных столбца пар ключ-значение с фиксированной шириной между ключами и значениями?

Question

Это то, что у меня есть для двух соседних столбцов пар ключ-значение с фиксированной шириной между ключами-значениями. Столбцы должны разделяться при изменении размера, но не сами пары ключей и значений.

Я не совсем понимаю, как работает «ширина: 1%». Есть ли лучшее решение для этого? Что-то не так с тем, как я это сделал?

1004 *http://jsfiddle.net/zdt6ejq0/3/

<table width="50%" style="float: left">
  <tr>
    <td style="vertical-align: top; width: 1%"><b>Inment:</b></td>
    <td style="vertical-align: top">{wbsSubstructure}</td>
  </tr>
  <tr>
    <td><b>ACDnge&nbsp;Oer:</b></td>
    <td>{changder}</td>
  </tr>
  <tr>
    <td><b>Coct&nbsp;Ne:</b></td>
    <td> {cact}</td>
    <tr>
      <td style="vertical-align:top;"><b>Den:</b></td>
      <td> {dil}</td>
    </tr>
</table>
<table width="50%" class="data" style="float: right">
  <tr>
    <td style="vertical-align: top; width: 1%"><b>Inon&nbsp;De:</b></td>
    <td style="vertical-align: top">{ine}</td>
  </tr>
  <tr>
    <td><b>Sc&nbsp;Nr:</b></td>
    <td> {spmber}</td>
  </tr>
  <tr>
    <td><b>Cct&nbsp;Nr:</b></td>
    <td> {cumber}</td>
  </tr>
  <tr>
    <td style="vertical-align:top;"><b>Don:</b></td>
    <td> {dil}</td>
  </tr>
</table>

Answer 1

Есть много способов сделать это, каждый вариант зависит от вашего стека, личных предпочтений и / или требований. Если вы не привязаны к использованию таблицы. Я предпочитаю использовать div для достижения того же эффекта. Это позволяет использовать современные атрибуты css3 и не быть связанным ограничениями элемента таблицы. Да, таблицы семантически правильны для табличных данных, однако, в мире реагирования возникает мир сложностей, для которых таблицы изначально не были предназначены.

Пример:

.tabular-data {
  display: flex;
  flex-wrap: wrap;
}
.column {
  flex-basis: 50%;
  display: flex;
  
}
.column .column-inner:first-child {
  flex-basis: auto;
  flex-wrap: nowrap;
}
.column .column-inner:last-child {
  flex-grow: 1;
  padding-left: 0.5rem;
}

<div class="tabular-data">
  <div class="column">
    <div class="column-inner">
      <div class="cell"><strong>Inment:</strong></div>
      <div class="cell"><strong>ACDnge&nbsp;Oer:</strong></div>
      <div class="cell"><strong>Coct&nbsp;Ne:</strong></div>
      <div class="cell"><strong>Den:</strong></div>
    </div>
    <div class="column-inner">
        <div class="cell"> {dil}</div>
        <div class="cell"> {cact}</div>
        <div class="cell">{wbsSubstructure}</div>
        <div class="cell">{changder}</div>
    </div>
  </div>
  <div class="column">
    <div class="column-inner">
      <div class="cell"><strong>Inon&nbsp;De:</strong></div>
      <div class="cell"><strong>Sc&nbsp;Nr:</strong></div>
      <div class="cell"><strong>Cct&nbsp;Nr:</strong></div>
      <div class="cell"><strong>Don:</strong></div>
    </div>
    <div class="column-inner">
      <div class="cell">{ine}</div>
      <div class="cell">{spmber}</div>
      <div class="cell">{cumber}</div>
      <div class="cell">{dil}</div>
    </div>
  </div>
</div>

Answer 2

Вы можете поместить таблицы в два элемента: один с плавающей слева, другой с плавающей справа.

Я также рекомендую использовать css классы, а не теги стилей, внутри html.

Примерно так:

http://jsfiddle.net/69x3rstc/

<div class="container">
   <div class="floatLeft">
      <table>
         <tr >
            <td><b>Inment:</b></td>
            <td>{wbsSubstructure}</td>
         </tr>
         <tr >
            <td ><b>ACDnge&nbsp;Oer:</b></td>
            <td>{changder}</td>
         </tr>
         <tr >
            <td ><b>Coct&nbsp;Ne:</b></td>
            <td> {cact}</td>
         <tr >
            <td><b>Den:</b></td>
            <td> {dil}</td>
         </tr>
      </table>
   </div>
   <div class="floatRight">
      <table class="data">
         <tr >
            <td><b>Inon&nbsp;De:</b></td>
            <td>{ine}</td>
         </tr>
         <tr >
            <td ><b>Sc&nbsp;Nr:</b></td>
            <td> {spmber}</td>
         </tr>
         <tr >
            <td ><b>Cct&nbsp;Nr:</b></td>
            <td> {cumber}</td>
         </tr>
         <tr >
            <td><b>Don:</b></td>
            <td> {dil}</td>
         </tr>
      </table>
   </div>
</div>

CSS

.floatLeft { width: 50%; float: left; }
.floatRight {width: 50%; float: right; }
.container { overflow: hidden; }