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

Как не переполнить ячейки таблицы вертикально и распечатать таблицу?

0 голосов
/ 14 января 2019

Я знаю, что есть много вопросов по этому поводу, но ни одно из их решений не помогло мне.

У меня html-страница, образованная только таблицей (которую я хочу напечатать), я хочу, чтобы таблица идеально помещалась внутри горизонтального листа формата a4.

Это моя таблица без текста (судья матча):

myTable

Проблема в том, что при добавлении текста высота изменяется.

Я пытался добавить div внутри td с высотой, но это не очень хорошо работает ...

Также я хотел бы знать, как печатать страницу по горизонтали, так как моя таблица переполняет область печати ...

Это пример моей таблицы: 

<table>
  <tr>
    <td>
      <div>BLABLABLA</div>
    </td>
  </tr>
  ...
  ...
  ...
</table>

1 Ответ

0 голосов
/ 14 января 2019

Я бы предложил использовать table-layout: fixed для управления размером таблицы и ячеек. Затем, как показано в примере ниже, управляйте переполнением. Что дает вам растянутую таблицу, которая не будет приспосабливать высоту к содержанию. 

.myTable {
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.myTable tr td div{
  overflow: hidden;
  border: 1px solid #333;
  height: 20px;
}

.myTable tr.higher td div {
  height: 40px;
}
<table class="myTable">
  <tr>
    <td><div>A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.</div></td>
  <td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
  </tr>
  <tr class="higher">
    <td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
    <td><div>A lot of text to display. A lot of text to display.</div></td>
  </tr>
</table>

Вы можете вставить его в @media print и правильно настроить его под свой стол.

Ссылки:

...