Блог

Я работаю над макетом таблицы, который нуждается в любви CSS. Моя цель проста: 2 строки, 2 столбца. Таблица будет иметь фиксированную ширину, скажем, 250 пикселей, первый столбец будет иметь максимальную ширину, скажем, 100 пикселей (но текст внутри может переноситься), а второй столбец должен занимать оставшуюся часть ширины таблицы, но не должен переноситься и вместо этого должен иметь текстовое многоточие в конце таблицы.первая строка.

Вот мой текущий подход. Вы увидите, что второй столбец делает таблицу шире 250 пикселей:

 .table {
  display: table;
  width: 250px;
  overflow: hidden;
  background: #f7f5eb;
  color: #cf6824;
}

.tr {
  display: table-row;
}

.tc {
  display: table-cell;
  padding: 10px 0;
}

.truncate {
  max-width: 100px;
}

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

 <div class='table'>
  <div class='tr'>
    <div class='tc truncate'>Wow such CSS very style</div>
    <div class='tc no-wrap'>That was a very loud beep. I don't even know if this is working.</div>
  </div>
  <div class='tr'>
    <div class='tc truncate'>Mark? Mark? Are you there?</div>
    <div class='tc no-wrap'>Are you screening your calls? It's Mom? We wanted to call and say we love you.</div>
  </div>
</div> 

Как вы можете видеть, мой второй col ( .no-wrap ) увеличивает ширину таблицы, что я бы хотел предотвратить.

Как я могу достичь цели, выраженной выше? Любые указатели будут очень приветствоваться!