CSS: обрезать ячейки таблицы, но вмещать как можно больше

Question

Знакомьтесь, Фред.Он таблица:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

В квартире Фреда есть странная привычка менять размер, поэтому он научился скрывать часть своего контента, чтобы не отталкивать все остальные юнитыперевернуть и затолкнуть гостиную миссис Уитфорд в забвение:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

Это работает, но у Фреда возникает ноющее чувство, будто его правая клетка (которую он прозвал Celldito)оставив немного места, его левая клетка не будет усечена почти столько же времени.Можете ли вы сохранить его здравомыслие?

---

В заключение: как клетки таблицы могут переполняться равномерно, и только тогда, когда все они оставили все свои пробелы?

Answer 1

Этот вопрос всплывает в Google, поэтому в моем случае я использовал фрагмент css из https://css -tricks.com / snippets / css / truncate-string-with-ellipsis / , но применяяэто к тд не дает желаемого результата.

Мне пришлось добавить тег div вокруг текста в тд, и многоточие наконец заработало.

Сокращенный HTML-код;

<table style="width:100%">
 <tr>
    <td><div class='truncate'>Some Long Text Here</div></td>
 </tr>
</table>

Сокращенный CSS;

.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

Answer 2

Просто добавьте следующие правила к вашему td:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

Пример:

table {
  width: 100%
}

td {
  white-space: nowrap;
}

.td-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 0;
}

<table>
  <tr>
    <td>content</td>
    <td class="td-truncate">long contenttttttt ttttttttt ttttttttttttttttttttttt tttttttttttttttttttttt ttt tttt ttttt ttttttt tttttttttttt ttttttttttttttttttttttttt</td>
    <td>other content</td>
  </tr>
</table>

PS: Если вы хотите установить другую ширину td, используйте свойство min-width.

Answer 3

Не знаю, поможет ли это кому-нибудь, но я решил похожую проблему, указав конкретные размеры ширины в процентах для каждого столбца.Очевидно, что это будет работать лучше всего, если в каждом столбце есть содержимое с шириной, которая не слишком различается.

Answer 4

У меня была такая же проблема, но мне нужно было отобразить несколько строк (где text-overflow: ellipsis; не удается).Я решаю это, используя textarea внутри TD, а затем стилизую его так, чтобы он вел себя как ячейка таблицы.

    textarea {
        margin: 0;
        padding: 0;
        width: 100%;
        border: none;
        resize: none;

        /* Remove blinking cursor (text caret) */
        color: transparent;
        display: inline-block;
        text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */
        &:focus {
            outline: none;
        }
    }

Answer 5

Проверьте, решает ли "nowrap" проблему в определенной степени.Примечание: nowrap не поддерживается в HTML5

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
<tr>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >This cells has more content  </td>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >Less content here has more content</td>
</tr>

Answer 6

Учитывая, что «table-layout: fixed» является обязательным требованием макета, это создает равномерно расположенные нерегулируемые столбцы, но вам нужно сделать ячейки разной ширины в процентах, возможно, установите для «colspan» ваших ячеек значение кратный?

Например, используя общую ширину 100 для простых вычислений в процентах и ​​говоря, что вам нужна одна ячейка с 80%, а другая с 20%, рассмотрите:

<TABLE width=100% style="table-layout:fixed;white-space:nowrap;overflow:hidden;">
     <tr>
          <td colspan=100>
               text across entire width of table
          </td>
     <tr>
          <td colspan=80>
               text in lefthand bigger cell
          </td>
          <td colspan=20>
               text in righthand smaller cell
          </td>
</TABLE>

Конечно, для столбцов 80% и 20%, вы можете просто установить colspan ячейки 100% ширины на 5, 80% на 4 и 20% на 1.

Answer 7

Я недавно работал над этим.Проверьте это jsFiddle test , попробуйте самостоятельно изменить ширину базовой таблицы, чтобы проверить поведение).

Решение состоит во внедрении таблицы в другую:

<table style="width: 200px;border:0;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="width: 100%;">
                <table style="width: 100%;border:0;border-collapse:collapse">
                    <tbody>
                        <tr>
                            <td>
                                <div style="position: relative;overflow:hidden">
                                    <p>&nbsp;</p>
                                    <p style="overflow:hidden;text-overflow: ellipsis;position: absolute; top: 0pt; left: 0pt;width:100%">This cells has more content</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="white-space:nowrap">Less content here</td>
        </tr>
    </tbody>
</table>

Фред теперь доволен расширением Celldito?

Answer 8

вы можете установить ширину правой ячейки на минимум необходимой ширины, затем применить overflow-hidden + text-overflow к внутренней части левой ячейки, но Firefox здесь глючит ...

хотя, кажется, flexbox может помочь