Чому переповнення: прихований не працює в <td>?

146

У мене є комірка таблиці, яку я завжди хотів би бути певної ширини. Однак це не працює з великими рядками нерозміщеного тексту. Ось тестовий випадок:

td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Розгорніть фрагмент

Як зробити так, щоб текст був вирізаний на краю поля, а не розширювався?

html css

— мікрофон
джерело

205

Ось така ж проблема .

Ви повинні встановити table-layout:fixed і відповідну ширину в елементі таблиці, а також overflow:hiddenі white-space: nowrapна елементах таблиці.

Приклади

Стовпи з фіксованою шириною

Ширина таблиці повинна бути такою ж (або меншою), ніж комірка з фіксованою шириною.

З одним стовпцем фіксованої ширини:

Показати фрагмент коду

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Розгорніть фрагмент

З декількома стовпцями фіксованої ширини:

Показати фрагмент коду

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 200px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Розгорніть фрагмент

Фіксовані та ширини рідини колони

Необхідно встановити ширину столу , але будь-яку додаткову ширину просто приймають клітинки з рідиною.

З декількома стовпцями, фіксованою шириною і шириною текучого середовища:

Показати фрагмент коду

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  background: #F00;
  padding: 20px;
  border: solid 1px #000;
}
tr td:first-child {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Розгорніть фрагмент

— misterManSam
джерело

21

Ось так і є. Я вважаю, що це може бути тому, що властивість 'display' елемента TD по суті встановлено на 'table-cell', а не на 'block'.

У вашому випадку альтернативою може бути загортання вмісту TD у DIV та нанесення ширини та переливу на DIV.

<td style="border: solid green 1px; width:200px;">
    <div style="width:200px; overflow:hidden;">
        This_is_a_terrible_example_of_thinking_outside_the_box.
    </div>
</td>

Можливо, вам доведеться вирішити деякі проблеми з накладкою або накладкою на стільникові, і вам краще видалити вбудовані стилі та замість цього використовувати зовнішній css, але це має бути початком.

— Енді Форд
джерело

Це працює, але я втрачаю vertical-align:middleі навіть додавання його до DIV не вирішує проблему.

— Майкл

10

Застосовуйте CSS table-layout:fixed;(а іноді width:<any px or %>) до ТАБЛИЦІ та white-space: nowrap; overflow: hidden;стиль на TD. Потім встановіть ширину CSS на правильну елементи комірки або стовпця.

Значно, ширини стовпців таблиці з фіксованою компонуванням визначаються шириною комірок у першому рядку таблиці. Якщо в першому рядку є елементи TH, а ширини застосовуються до TD (а не TH), то ширина застосовується лише до вмісту TD (пробіл та переповнення можуть ігноруватися); стовпці таблиці будуть розподілятися рівномірно незалежно від встановленої ширини TD (оскільки не вказані ширини [для TH у першому рядку]) і стовпці матимуть [обчислені] рівні ширини; таблиця не перерахує ширину стовпця на основі ширини TD у наступних рядках. Встановіть ширину на перші елементи комірок, з якими зіткнеться таблиця.

Крім того, найбезпечнішим способом встановлення ширини стовпців є використання <COLGROUP>та <COL>тегів у таблиці із встановленою шириною CSS для кожної фіксованої ширини COL. CSS, пов’язаний із шириною комірки, грає приємніше, коли таблиця завчасно знає ширину стовпців.

— szozz
джерело

7

Я не знайомий з конкретною проблемою, але ви можете вставити div і т. Д. Всередині ТД і встановити переповнення на це.

— Олі
джерело

5

Ну ось рішення для вас, але я не дуже розумію, чому це працює:

<html><body>
  <div style="width: 200px; border: 1px solid red;">Test</div>
  <div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels.  These pretzels are making me thirsty.</div>
  <div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
  This_is_a_terrible_example_of_thinking_outside_the_box.
  </div>
  <table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
   <td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
    This_is_a_terrible_example_of_thinking_outside_the_box.
   </div></td>
  </tr></table>
</body></html>

А саме, загортаючи вміст комірок у діву.

— клетус
джерело

Це можна додатково покращити, як показано тут - конкретно, overflow:hiddenйого можна видалити td, а ширину банки divможна встановити на 100%, щоб вона працювала з будь-якою tdшириною (включаючи автоматичні розміри!)

— Роман Старков,

4

Найкраще рішення - помістити div у комірку таблиці з нульовою шириною. Осередки таблиці Tbody успадкують їх ширину від ширини, визначеної thead. Позиція: відносна та негативна маржа повинні зробити трюк!

Ось скріншот: https://flic.kr/p/nvRs4j

<body>
<!-- SOME CSS -->
<style>
    .cropped-table-cells,
    .cropped-table-cells tr td { 
        margin:0px;
        padding:0px;
        border-collapse:collapse;
    }
    .cropped-table-cells tr td {
        border:1px solid lightgray;
        padding:3px 5px 3px 5px;
    }
    .no-overflow {
        display:inline-block;
        white-space:nowrap;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }
</style>

<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
    <thead>
        <tr>
            <td style="width:100px;" width="100"><span>ORDER<span></td>
            <td style="width:100px;" width="100"><span>NAME<span></td>
            <td style="width:200px;" width="200"><span>EMAIL</span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="no-overflow">123</span></td>
            <td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
            <td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
    </tbody>
</table>
</body>

— Гюла Сурман
джерело

Ви повинні використовувати як span, так і div, звичайно, маючи належні налаштування блоку для span, оголошеного в css. Як я знаю, td повинен містити і div.

— Джула Сурманн

3

Вам доведеться встановити атрибути стилю таблиці: widthі table-layout: fixed;дозволити "overflow: hidden;" атрибут працювати належним чином.

Imo, це працює краще, ніж використовуючи divs з widthатрибутом style, особливо при використанні його для динамічних розрахунків розміру, таблиця матиме більш простий DOM, що полегшує маніпуляції, оскільки виправлення для замітки та поля не потрібні

Крім того, вам не потрібно встановлювати ширину для всіх комірок, а лише для комірок у першому рядку.

Подобається це:

<table style="width:0px;table-layout:fixed">
<tr>
    <td style="width:60px;">
        Id
    </td>
    <td style="width:100px;">
        Name
    </td>
    <td style="width:160px;overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
<tr>
    <td style="">
        Id
    </td>
    <td style="">
        Name
    </td>
    <td style="overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
</table>

— Вілько Гесінк
джерело

2

У мене щойно була подібна проблема, і мені довелося спочатку використовувати <div>внутрішню <td>частину (рішення Джона Макінтайра не працювало для мене з різних причин).

Зауважте, що <td><div>...</div></td>це невірне розташування для діва, тому замість цього я використовую <span>з display:block;набором. Це зараз добре підтверджує і працює.

— Просто розвиток
джерело

1

Найпростіше і найпростіше рішення, яке працює:

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

— Армін
джерело

0

щоб зробити більш простим, я пропоную помістити текстову область всередині телевізора, який автоматично управляє переливом

<td><textarea autofocus>$post_title</textarea></td>

потрібно поліпшити

— Жил Бланшард
джерело

0

<style>
    .col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
    <tr>
        <td class="col">123456789123456789</td>
    </tr>
</table>

відображає 123456

— Франческо Руффо де Бонневаль
джерело