Как скрыть переполнение таблицы строк?

У меня есть некоторые html-таблицы, где текстовые данные слишком велики, чтобы соответствовать. Таким образом, он расширяет ячейку вертикально, чтобы соответствовать этому. Итак, теперь строки с переполнением в два раза выше, чем строки с меньшим количеством данных. Это неприемлемо. Как заставить таблицу иметь ту же высоту строки 1em?

Вот некоторая разметка, которая воспроизводит проблему. Таблица должна быть только высотой одной строки, при этом скрытый текст скрыт.

<!DOCTYPE html>

<html>
  <head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
      table { width:250px; }
      table tr { height:1em; overflow:hidden; }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>This is a test.</td>
        <td>Do you see what I mean?</td>
        <td>I hate this overflow.</td>
      </tr>
    </table>
  </body>
</html>

Ответ 1

Необходимо указать два атрибута, table-layout:fixed на table и white-space:nowrap; на ячейках. Вам также необходимо переместить overflow:hidden; в ячейки.

table { width:250px;table-layout:fixed; }
table tr { height:1em;  }
td { overflow:hidden;white-space:nowrap;  }

Здесь демо. Протестировано в Firefox 3.5.3 и IE 7

Ответ 2

В общем случае, если вы используете white-space: nowrap;, это, вероятно, потому, что вы знаете, какие столбцы будут содержать контент, который обертывает (или растягивает ячейку). Для этих столбцов я обычно обертываю содержимое ячейки в span специальным атрибутом class и применяю конкретный width.

Пример:

HTML

<td><span class="description">My really long description</span></td>

CSS

span.description {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 150px;
}

Ответ 3

В большинстве современных браузеров вы можете указать:

<table>
 <colgroup>
  <col width="100px" />
  <col width="200px" />
  <col width="145px" />
 </colgroup>
 <thead>
  <tr>
   <th>My 100px header</th>
   <th>My 200px header</th>
   <th>My 145px header</th>
  </tr>
 </thead>
 <tbody>
  <td>100px is all you get - anything more hides due to overflow.</td>
  <td>200px is all you get - anything more hides due to overflow.</td>
  <td>100px is all you get - anything more hides due to overflow.</td>
 </tbody>
</table>

Затем, если вы примените стили из сообщений выше, выполните следующие действия:

table {
    table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
    overflow: hidden;
    white-space: nowrap;
}

Результат дает вам красивое скрытое переполнение по всей таблице. Работает в последних браузерах Chrome, Safari, Firefox и IE. Я не тестировал в IE до 9 - но я предполагаю, что он будет работать до 7, и вам может даже посчастливиться увидеть поддержку 5.5 или 6.;)

Ответ 4

Только недостаток (кажется), заключается в том, что ширина ячейки таблицы идентична. Любые способ обойти это? - Джош Стодола 12 октября в 15:53

Просто определите ширину таблицы и ширины для каждой ячейки таблицы

что-то вроде

table {border-collapse:collapse; table-layout:fixed; width:900px;}
th {background: yellow; }
td {overflow:hidden;white-space:nowrap; }
.cells1{width:300px;}
.cells2{width:500px;}
.cells3{width:200px;}

Он работает как шарм: o)

Ответ 5

Вот что я попробовал. В принципе, я помещаю "гибкий" контент (td, который содержит слишком длинные строки) в контейнере div, который имеет одну строку высотой со скрытым переполнением. Затем я разрежу текст обернуться в невидимое. Тем не менее, вы получаете перерывы в слове, но не просто плавное прерывание.

table {
    width: 100%;
}

.hideend {
    white-space: normal;
    overflow: hidden;
    max-height: 1.2em;
    min-width: 50px;
}
.showall {
    white-space:nowrap;
}

<table>
    <tr>
        <td><div class="showall">Show all</div></td>
        <td>
            <div class="hideend">Be a bit flexible about hiding stuff in a long sentence</div>
        </td>
        <td>
            <div class="showall">Show all this too</div>
        </td>
    </tr>
</table>

Ответ 6

Если javascript принимается как ответ, я создал плагин jQuery для решения этой проблемы (для получения дополнительной информации о проблеме см. CSS: усечь ячейки таблицы, но по возможности как можно больше).

Чтобы использовать плагин, просто введите

$('selector').tableoverflow();

Плагин: https://github.com/marcogrcr/jquery-tableoverflow

Полный пример: http://jsfiddle.net/Cw7TD/3/embedded/result/