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 you have read our privacy policy.

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