Отсечение содержимого ячейки в таблице

Question

Я хочу создать квадратную таблицу 9x9, ширина и высота должны составлять 100%, а каждая ячейка должна составлять 11,11% высоты и ширины. Я мог бы сделать это с помощью приведенного ниже кода, но когда текст внутри ячейки слишком велик, ячейка растет вместе с ним. Я не хочу этого Я просто хочу, чтобы текст был скрыт. Сохранить размер таблицы - мой приоритет;)

Вот что я написал:

<div class="full_screen">
<table border="1" class="full_width full_height">
<tr class="cell_row">
    <td class="cell">long long long long long text</td>
    <td class="cell">2</td>
    <td class="cell">3</td>
    <td class="cell">4</td>
    <td class="cell">5</td>
    <td class="cell">6</td>
    <td class="cell">7</td>
    <td class="cell">8</td>
    <td class="cell">9</td>
</tr>
... other 8 rows and its cells are similar...

CSS

body {
    font-size: 9px;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    background-color: rgba(0,0,0,0);
    height: 100%;
}

div.full_screen {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cell_row {
    width: 100%;
    height: 11%;
}

.cell {
    width: 11%;
     /*height:100%;*/ /*cell height should be always 11% the height of the hole table*/
    margin: 0px;
    padding: 0px;
    word-break: break-all;
}

Как я могу обрезать содержимое ячейки, чтобы высота ячейки всегда составляла 11% (100% / 9 = 11,11%) таблицы?

Answer 1

У вас есть несколько проблем здесь.

Во-первых, таблицы не предназначены для такой работы, они расширяются по горизонтали, а не по вертикали, поэтому они никогда не будут учитывать height:11% на строку.

Во-вторых, TR стили игнорируются, поэтому их можно безопасно удалить.

В-третьих, высота игнорирования TD по той же причине, что и в первой точке.

НО, есть обходной путь к третьей точке, вы можете использовать line-height для принудительного задания высоты TD или вложенного элемента (т.е. DIV) с надлежащей высотой. Но это по-прежнему оставляет проблему: невозможно получить высоту, равную 11% от общей высоты документа / окна.

Что вы можете сделать, это использовать JavaScript для обновления высоты TD (используя обходной путь, описанный выше) при загрузке страницы (и обновлении при изменении размера).

Answer 2

Вы можете добавить

table-layout:fixed;
word-wrap:break-word;

к вашему классу таблицы.Это гарантирует, что ваша ширина не будет превышать заданный%.Это автоматически обернет ваш контент соответствующим образом.

Answer 3

Как я вижу, это можно исправить, используя следующие два способа:

1. Вы можете добавить размер шрифта: 11px; .cell класс

2. Получаете ли вы эти данные из серверной части или отображаете текст, используя JSP или
   что-то. Если вы знаете, сколько букв вы должны отобразить, вы можете получить подстроку и добавить ... (эллипс). Как у тебя, строка будет длинной, длинной, длинной ...

Если ваше приложение позволяет вам.