Установите правильные пропорции клеток в таблице - PullRequest
0 голосов
/ 26 марта 2019

У меня проблемы с неправильным вычислением положения и ширины ячейки.

Резюме, проблема:

Ширина левого столбца увеличивается слишком быстро (в то время как внутри текста пишется), так что украсть пространство правого столбца, действительно важный интервал.

Мой код:

table {
  width: 100%;
}

td {
  border: 1px solid black;
}
<table>
  <tr>
    <td>This</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too much</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too much space</td>
    <td>1</td>
  </tr>
</table>

Ответы [ 2 ]

1 голос
/ 26 марта 2019

table {
  width: 100%;
}
td:first-child {
  border: 1px solid black;
  white-space: nowrap;
}
td:last-child {
  border: 1px solid black;
  width: 100%;
}
<table>
  <tr>
    <td>This</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
   <td>This text escapes too much</td>
   <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too much space</td>
    <td>1</td>
  </tr>
</table>
0 голосов
/ 26 марта 2019

Это то, что вы ищете? Или вы хотите иметь отдельные таблицы для каждой строки?

// ----- EDIT ----- //

Хорошо, круто, я не был уверен, чего вы пытаетесь достичь, это должно сработать для вас.

table {
  width: 100%;
}
td {
  border: 1px solid black;
  white-space: nowrap;
}
td:nth-child(2){
  width: 100%;
}
<table>
  <tr>
    <td>This</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
   <td>This text escapes too much</td>
   <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>This text escapes too much space</td>
    <td>1</td>
  </tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...