CSS Table with one column taking remaining space

Question

I have tried now several things (and looked around here) and nothing worked so far. So I am going to ask.

What I want:

I have the following

Answer 1

I was facing the same challenge and I found the following solution using tables.

The HTML needs to use a DIV in the long column. The CSS defines your small and extend classes. The hard part being the definition of the extend class.

This gives you the behavior you describe.

HTML

  

    
First column with text
    

      
This column should fill the remaining space but should be truncated if the text is too long.
    
    
Small column
  

CSS

table {
  margin-top: 50px;
}

table td {
  white-space: nowrap;
}

table td:nth-child(1) {
  background-color: red;
}

table td:nth-child(2) {
  background-color: green;
}

table td:nth-child(3) {
  background-color: orange;
}

.extend {
  display: table;
  table-layout: fixed;
  width: 100%
}

.small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}