Ширина ячейки по содержимому + text-overflow

#css #вёрстка

Есть таблица фиксированной ширины, состоящая из двух колонок.
Необходимо с помощью css выставить:
ширину левой колонки - по содержимому, 
ширину правой - остаток (ширина таблицы - ширина первой колонки) и если необходимо
обрезать текст.
Пробовал
.table {
    width: 100%;
    table-layout: fixed;
}
.table td:last-child {
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
}

В данном случае текст в ячейках "налазит" друг на друга. Пробовал другие способы
(без table-layout: fixed) - ширина таблицы увеличивается.
То есть нужен такой вариант:
Column1 | Column2
Foo       BarBar

Column1     | Co2
Foooooooooo   B...
    

Ответы

Ответ 1

Если я правильно подозреваю, что колонка, которая по содержимому, не должна содержать
многострочный текст, то это делается так:



table {
  width: 100%;
}

tr :first-child {
  width: 0;
  white-space: nowrap;
}

tr :last-child {
  width: 100%;
}

  

    
Первая колонка
    
Вторая колонка
  

    
Какая-то метка
    
Есть таблица фиксированной ширины, состоящая из двух колонок. Необходимо
с помощью css выставить: ширину левой колонки - по содержимому, ширину правой - остаток
(ширина таблицы - ширина первой колонки) и если необходимо обрезать текст. Пробовал
  







Упс.. Не заметил, что многоточие надо. Тогда так:



table {
  width: 100%;
  line-height: 1.5em;
}

tr > :first-child {
  width: 0;
  white-space: nowrap;
  vertical-align: top;
}

tr > :last-child {
  width: 100%;
  position: relative;
  vertical-align: top;
}

tr > :last-child > div {
  position: absolute;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

  

    
Первая колонка
    
Вторая колонка
  

    
Какая-то метка
    
Есть таблица фиксированной ширины, состоящая из двух колонок. Необходимо
с помощью css выставить: ширину левой колонки - по содержимому, ширину правой - остаток
(ширина таблицы - ширина первой колонки) и если необходимо обрезать текст. Пробовал
  



Ответ 2

Единственное, что пришло в голову - это сымитировать поведение таблицы дивами.
То есть:
html:

    

        
Very-Very Big Content
        
Content
    


css:
.clearfix {*zoom: 1;}
.clearfix:before,
.clearfix:after {display: table; line-height: 0; content: ' ';}
.clearfix:after {clear: both;}

.table {
    width: 100%;
    display: table;
}
.table .tr {display: table-row; background: #bbb;}
.table .tr .td {display: table-cell; padding: 3px;}
.table .tr .td:last-child {
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 60px; /* ну это на свое усмотрение, естественно */
}