1

Всем привет, подскажите как реализовать решение: Есть 3 столбца таблицы и 6 ячеек по 3 на строку - таблице присвоено CSS значение: width: 100%; а ячейкам: width: 33.33333333333333%; - если эту таблицу заполнять данными то текст переносится, а хотелось бы присвоить свойство для каждой ячейки: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - если я присваиваю это значение то вместо сокращения текста получается что он вытягивается во всю ширину и таблица выходит за div.

<table style="width: 100%;">
<tbody style="width: 100%;">
<tr style="width: 100%;">
<td style="width: 33.33333333333333%;     white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;">Привеееееееееееееееттттттттттттттттттттттттттттттттт</td>
<td style="width: 33.33333333333333%;">&nbsp;</td>
<td style="width: 33.33333333333333%;">&nbsp;</td>
</tr>
<tr style="width: 100%;">
<td style="width: 33.33333333333333%;">&nbsp;</td>
<td style="width: 33.33333333333333%;">&nbsp;</td>
<td style="width: 33.33333333333333%;">&nbsp;</td>
</tr>
<tr style="width: 100%;">
<td style="width: 33.33333333333333%;">&nbsp;</td>
<td style="width: 33.33333333333333%;">&nbsp;</td>
<td style="width: 33.33333333333333%;">&nbsp;</td>
</tr>
<tr style="width: 100%;">
<td style="width: 33.33333333333333%;">&nbsp;</td>
<td style="width: 33.33333333333333%;">&nbsp;</td>
<td style="width: 33.33333333333333%;">&nbsp;</td>
</tr>
<tr style="width: 100%;">
<td style="width: 33.33333333333333%;">&nbsp;</td>
<td style="width: 33.33333333333333%;">&nbsp;</td>
<td style="width: 33.33333333333333%;">&nbsp;</td>
</tr>
<tr style="width: 100%;">
<td style="width: 33.33333333333333%;">&nbsp;</td>
<td style="width: 33.33333333333333%;">&nbsp;</td>
<td style="width: 33.33333333333333%;">&nbsp;</td>
</tr>
</tbody>
</table>

2
  • Возможно Вам нужно добавить до таблицы правило "table-layout: fixed;". А также, зачем вообще использовать таблицу, если можно смело использовать div. Да и гибкости с дивом больше
    – Node_pro
    19 июн 2020 в 12:59
  • @Node_pro для адаптивности - и проблема решается через display:grid только я не пойму как прикрутить его.
    – Nihroms
    19 июн 2020 в 13:01

1 ответ 1

1
table-layout: fixed;

Код полностью:

table {
  width: 100%;
  table-layout: fixed;
}

td {
  width: 33.333%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: 1px dotted blue;
}
<table>
  <tr>
    <td>Всем привет, подскажите как реализовать решение: Есть 3 столбца таблицы и 6 ячеек по 3 на строку - таблице присвоено CSS значение: width: 100%; а ячейкам: width: 33.33333333333333%; - если эту таблицу заполнять данными то текст переносится, а хотелось бы присвоить свойство для каждой ячейки: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - если я присваиваю это значение то вместо сокращения текста получается что он вытягивается во всю ширину и таблица выходит за div.
    <td>
    <td>
  </tr>
</table>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.