it-swarm.com.ru

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

У меня есть несколько таблиц 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>
52
Josh Stodola

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

95
Russ Cam

В общем, если вы используете 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;
}
21
user645077

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

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

8
Troy Alford

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

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

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

1
Popara

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

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

затем 

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

результат 

 overflow effect

0
Dan Alboteanu

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

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

$('selector').tableoverflow();

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

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

0
Marco