CSS изменить размер содержимого таблицы до ширины печати

Question

CSS изменить размер содержимого таблицы до ширины печати

0

Я ищу способ изменить размер содержимого таблиц с помощью CSS, чтобы убедиться, что содержимое отображается во время печати, но при этом сохраняет текст для обертывания для отдельной ячейки. В этом примере,

<table class="datatables" id="table1">
<tr>
<td style="white-space:nowrap;">This is a table with a bunch of data that stretches off the page when printed.</td>
<td style="white-space:nowrap;">I want it to print on one line, not wrap but also be sized small enough to fit on a printed page.</td>
<td style="white-space:nowrap;">It currently cuts off most of this last column.</td>
</tr>
</table>

Последний td в большинстве случаев отключается при печати, но все они отображаются, как я предполагал, в одной строке. Например, я ставил стиль inline, но использовал таблицы стилей. Мое идеальное решение автоматически изменит размер шрифта, чтобы он поместился по одной строке в строке без упаковки. Любые мысли были бы оценены.

John Wesley Gordon 22 окт. 2013, в 17:57

Источник

0

Вы хотите что-то вроде этого: fittextjs.com ?
Corey Rothwell 22 окт. 2013, в 16:46

Теги:

html

css

printing

html-table

3 ответа

1

Возможно, вы можете попробовать

@media print
 {
   table.datatables {font-size:10px} /*Type the value that you want*/
 }

DaniP 22 окт. 2013, в 14:10

0

Это сработало бы, если бы я выбрал произвольно малый размер шрифта, но мне было интересно, есть ли способ сделать так, чтобы размер шрифта был автоматически, по сути это font-size: auto. Мне нужно только это в таблице стилей печати, поэтому я хочу повлиять на @media print.
John Wesley Gordon 22 окт. 2013, в 16:20
0

Я действительно не знаю о каком-то шрифте авторазмера с помощью css, но проверяйте это asnwer stackoverflow.com/questions/6112660/…
DaniP 22 окт. 2013, в 16:33

0

Вы можете проверить настройки печати в своем браузере Chrome, используя "Найти поля масштаба" в "Параметры печати" и настроить размер страницы в соответствии с вашими требованиями.

Ghufran Javed 27 окт. 2017, в 07:23

Ещё вопросы

Вы хотите что-то вроде этого: fittextjs.com ?
Это сработало бы, если бы я выбрал произвольно малый размер шрифта, но мне было интересно, есть ли способ сделать так, чтобы размер шрифта был автоматически, по сути это font-size: auto. Мне нужно только это в таблице стилей печати, поэтому я хочу повлиять на @media print.
Я действительно не знаю о каком-то шрифте авторазмера с помощью css, но проверяйте это asnwer stackoverflow.com/questions/6112660/…

bpeterson76 · Accepted Answer · 2013-10-22T15-26-00.000Z

Управление выходом печати - задача почти невозможная. Вы никогда не знаете переменные того принтера, который использует пользователь, какие шрифты доступны, какие настройки установлены и т.д.

Раньше у меня была эта проблема, и самым чистым решением для пользователя было преобразовать таблицу в.pdf, которая будет отображаться почти одинаково на всех машинах и принтерах. Хотя с технической точки зрения это может показаться не так просто, существует довольно простое решение: datatables.

Используя плагин "table tools", вы можете создать.pdf-форматированную версию любой таблицы с несколькими строками кода и добавлением нескольких дополнительных файлов. Здесь рабочая демонстрация В двух словах, если ваша таблица правильно отформатирована и не безумно велика (обязательно используйте теги <thead>), вы должны просто загрузить нужные файлы, применить демо-код с изменением селектора чтобы соответствовать вашей таблице, ссылайтесь на swf файл, который облегчает создание.pdf, и он должен работать плавно. Большинство проблем, которые я видел в настройке, связаны с неправильной ссылкой на swf-путь.

Voila, пригодный для печати, простой код.