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

у меня есть некоторые таблицы 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 51
html css html-table

7 ответов:

необходимо указать два атрибута,table-layout:fixed on 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

94

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

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

<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

вот что я пробовал. В принципе, я помещаю "гибкий" контент (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>
2

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

1

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

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

$('selector').tableoverflow();

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

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

0

оберните стол в div С Class="контейнер"

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

затем 

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

результат

overflow effect

0