Почему переполнение: скрытые не работают в <td>?

У меня есть ячейка таблицы, в которой я всегда хотел бы быть определенной шириной. Однако он не работает с большими строками несложенного текста. Здесь тестовый пример:

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>

Ответ 1

Вот та же проблема.

Вам нужно установить 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>

Ответ 2

Это как раз TD. Я полагаю, что это может быть потому, что свойство "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 вместо этого, но это должно быть начало.

Ответ 3

Примените CSS table-layout:fixed; (а иногда и width:<any px or %>) к стилю TABLE и white-space: nowrap; overflow: hidden; в TD. Затем установите ширину CSS для правильных элементов ячейки или столбца.

Значительно, ширина столбцов таблицы фиксированного макета определяется шириной ячеек в первой строке таблицы. Если в первой строке есть TH-элементы, а ширины применяются к TD (а не TH), тогда ширина применяется только к содержимому TD (белое пространство и переполнение могут игнорироваться); столбцы таблицы будут распределяться равномерно, независимо от установленной ширины TD (поскольку в первой строке не указаны ширины [на TH в первой строке]), а столбцы будут иметь [расчетную] равную ширину; таблица не будет пересчитывать ширину столбца на основе ширины TD в последующих строках. Установите ширину для первых элементов ячейки, с которыми стол столкнутся.

В качестве альтернативы самым безопасным способом установки ширины столбцов является использование тегов <COLGROUP> и <COL> в таблице с шириной CSS, установленной на каждой фиксированной ширине COL. CSS, связанный с шириной ячейки, лучше, когда таблица знает ширину столбца заранее.

Ответ 4

Я не знаком с конкретной проблемой, но вы можете вставить div и т.д. внутри td и установить переполнение.

Ответ 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>

А именно, обертывание содержимого ячейки в div.

Ответ 6

Вам нужно будет установить атрибуты стиля таблицы: width и table-layout: fixed;, чтобы "переполнение: скрыто"; атрибут работает правильно.

Imo это работает лучше, чем использование div с атрибутом style width, особенно при использовании для динамических вычислений изменения размера, таблица будет иметь более простой 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>

Ответ 7

Лучшее решение - поместить div в ячейку таблицы с нулевой шириной. Ячейки таблицы тел наследуют их ширину от ширины, определяемой 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>

Ответ 8

У меня была аналогичная проблема, и мне сначала пришлось использовать <div> внутри <td> (решение John MacIntyre не работало для меня по разным причинам).

Примечание, хотя <td><div>...</div></td> не является допустимым местом размещения для div, поэтому вместо этого я использую набор <span> с display:block;. Теперь он корректно проверяет и работает.

Ответ 9

чтобы сделать более простым Я предлагаю разместить текстовое поле внутри td который автоматически управляет переполнением

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

должен быть улучшен

Ответ 10

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

отображает 123456

Ответ 11

Самое простое и простое решение, которое работает:

table { table-layout: fixed }

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