Set the proportions of cells at table correct

Question

I have some problems with wrong calculating of cell's position and width.

Summary, problem:

Width of left column is increasing too fast(while inside text is writing), so that steal the space of right column, really important spase.

My code:

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>

@NicolaeMaties I want to get something like this: https://i.imgur.com/2fpqQ0F.png — Egor, Mar 26 '19 at 14:25
Anyone (as I used my vote earlier), close this as a duplicate of https://stackoverflow.com/questions/7613541/adjusting-table-cell-width — Asons, Mar 26 '19 at 14:33
@EgorRandomize Add this class and it will render as you wish: `td:first-child { width: 1%; white-space: nowrap; }` — Asons, Mar 26 '19 at 14:34

score 1 · Answer 1 · answered Mar 26 '19 at 14:45

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>

score 0 · Accepted Answer · edited Oct 22 '20 at 22:42

Is this what you are looking for?

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>

Set the proportions of cells at table correct

2 Answers2