Text ellipsis in last table column, auto width in previous columns

Question

I have this table, I am trying to make it ...

• fit inside screen width without going over it
• have first 2 columns fit to content (as they will not contain very long text), but not a predefined fixed size
• last column to expand to fit as much text as possible, crop the text with ellipsis to prevent the table from going over screen width
• the long text on last column should also remain on one line

Previous solutions that I seen included a fixed width for table (all columns) but I want to keep first 2 flexible.

Edit: I guess all columns would be auto width, but the last one should expand as much as possible to fit remaining width without making table wider than screen.

<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>ID</td>
      <td>Title</td>
      <td>Description</td>
    </tr>
    <tr>
      <td nowrap="nowrap">123</td>
      <td nowrap="nowrap">Sample Title</td>
      <td nowrap="nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
    </tr>
  </tbody>
</table>

Answer 1

if this is what you want then you can use :last-of-type to select last td. if not comment below.

tr > td:last-of-type {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width:40px;
}

<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>ID</td>
      <td>Title</td>
      <td>Description</td>
    </tr>
    <tr>
      <td nowrap="nowrap">123</td>
      <td nowrap="nowrap">Sample Title</td>
      <td nowrap="nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
    </tr>
  </tbody>
</table>

Answer 2

I was only able to do this with divs and display:grid and works nicely, this answer was taken from another question, but I forgot the source.

If someone can make this functionality using <table>, please post an answer.

.grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

.cell {
  padding:1em;
  border:1px solid #CCC;
  background-color:#EBEBEB;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="grid">

  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  
   <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  
    <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  
</div>