Пробел: nowrap; настроить ширину столбца таблицы

Я установил ширину этих столбцов в процентах (%)

Без white-space: nowrap; ширина столбца соответствует настройкам (20%, 20%, 20%, 15%, 15%, 10%)

.cell-component {
  width: 90%;
  background-color: aqua;
  // white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

Я хочу скрыть текст, если он переполняется, поэтому мне нужно добавить white-space: nowrap; Я надеюсь, что при этом будут сохранены как проценты (20%, 20%, 20%, 15%, 15%, 10%), так и скрытый текст при переполнении, но фактическая ширина автоматически устанавливается для этих столбцов.

.cell-component {
  width: 90%;
  background-color: aqua;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }

Любые идеи для решения этой проблемы? Пожалуйста, дайте отзыв, если у меня есть что-то неправильное в моем коде. Спасибо.

max-width: 90% ?
Louys Patrice Bessette 02.01.2023 19:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
61
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы установить ширину столбцов, вы можете использовать colgroup и установить фиксированную раскладку таблицы. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup

  <colgroup>
    <col style = "width:20%">
    <col style = "width:20%">
    <col style = "width:20%">
    <col style = "width:15%">
    <col style = "width:15%">
    <col style = "width:10%">
  </colgroup>  

* {
  padding: 0;
  margin: 0;
}
table {
  width: 100%;
  table-layout: fixed; // set table layout
}

.cell-component {
  background-color: aqua;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  column-width: auto;
 }
 <table border = "1">
  <colgroup>
    <col style = "width:20%">
    <col style = "width:20%">
    <col style = "width:20%">
    <col style = "width:15%">
    <col style = "width:15%">
    <col style = "width:10%">
  </colgroup>  
  <tr>
    <td>Col 1</td>
    <td class = "">Col 2</td>
    <td class = "">Col 3</td>
    <td class = "">Col 4</td>
    <td class = "">Col 5</td>
    <td class = "">Col 6</td>
  </tr>
  <tr>
    <td class = "cell-component col-20">lorem ipsum lorem ipsum</td>
    <td class = "cell-component col-20">lorem ipsum lorem ipsum</td>
    <td class = "cell-component col-20">lorem ipsum lorem ipsum</td>
    <td class = "cell-component col-15">lorem ipsum lorem ipsum</td>
    <td class = "cell-component col-15">lorem ipsum lorem ipsum</td>
    <td class = "cell-component col-10">lorem ipsum lorem ipsum</td>
  </tr>
</table> 

Другие вопросы по теме