Как скрыть переполнение строки таблицы? - PullRequest
Новая
       9

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

55 голосов
/ 12 октября 2009

У меня есть несколько 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>

Ответы [ 7 ]

97 голосов
/ 12 октября 2009

Необходимо указать два атрибута: 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

22 голосов
/ 04 марта 2011

В целом, если вы используете 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;
}
8 голосов
/ 14 июня 2012

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

<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. ;)

2 голосов
/ 27 февраля 2014

Вот кое-что, что я попробовал. По сути, я помещаю «гибкий» контент (тд, который содержит слишком длинные строки) в контейнер 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>
1 голос
/ 05 ноября 2009

Единственным недостатком (кажется) является то, что Ширина ячейки таблицы одинакова. любой способ обойти это? - Джош Стодола 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;}

Работает как шарм: о)

0 голосов
/ 03 марта 2018

обернуть таблицу в div с class = "container" 

div.container {
    width: 100%;
    overflow-x: auto;
}

затем 

#table_id tr td {
   white-space:nowrap;
}

результат

overflow effect

0 голосов
/ 13 мая 2013

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

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

$('selector').tableoverflow();

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...