переполнение: скрытый не работает в colgroups для очень длинных ячеек - PullRequest
Новая
       138

переполнение: скрытый не работает в colgroups для очень длинных ячеек

0 голосов
/ 30 мая 2020

Я довольно много искал в stackoverflow и google. Но решения найти не удалось. У меня есть таблица из 11 столбцов, из которых первый столбец может содержать длинный текст (без пробелов). Я адаптировался к подходу colgroup, но у меня он не работает. 

.mytable {
  table-layout: fixed;
  width: 1000px;
}

th,
td {
  padding: 5px;
}

.ten {
  width: 100px;
  overflow: hidden;
}

.others {
  font-size: 13px;
}
<table border=1 class="mytable">

  <colgroup>
    <col class="ten" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
  </colgroup>

  <thead>
    <tr>
      <th>VERY LONG COLUMN</th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
      <th>I</th>
      <th>J</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
  </tbody>
</table>

table output

Мне нужна таблица с фиксированной шириной. И я ищу решение, в котором можно обернуть текст. Я пробовал с word-wrap: break-word;, но он дает мне точный результат. Любая помощь приветствуется.

Решения, которые я пробовал:

Перенос слов в HTML таблице

как-сделать -i-wrap-text-with-no-whitespace-inside-a-td

Ответы [ 2 ]

1 голос
/ 30 мая 2020

Элемент <colgroup> может применять только следующие свойства стиля (см. spe c) к элементам <td>:

  • border
  • фон
  • ширина
  • видимость

В этом случае вы можете использовать псевдоселектор :first-child, чтобы ограничить переполнение первого элемента <td> каждого ряда. 

.mytable {
  table-layout: fixed;
  width: 1000px;
}

th,
td {
  padding: 5px;
}

.ten {
  width: 100px;
}

td:first-child {
  word-wrap: break-word;
}

.others {
  font-size: 13px;
}
<table border=1 class="mytable">

  <colgroup>
    <col class="ten" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
  </colgroup>

  <thead>
    <tr>
      <th>VERY LONG COLUMN</th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
      <th>I</th>
      <th>J</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 30 мая 2020

Используйте вместо word-wrap: break-all: 

.mytable {
  table-layout: fixed;
  width: 1000px;
}

th,
td {
  padding: 5px;
  word-break: break-all;
}

.ten {
  width: 100px;
  overflow: hidden;
}

.others {
  font-size: 13px;
}
<table border=1 class="mytable">

  <colgroup>
    <col class="ten" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
  </colgroup>

  <thead>
    <tr>
      <th>VERY LONG COLUMN</th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
      <th>I</th>
      <th>J</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
  </tbody>
</table>
...