Создание таблицы HTML с фиксированными размерами - PullRequest
0 голосов
/ 05 февраля 2012

Short

Попытка получить таблицу с точными размерами для печати a4

  • Поля для первой и последней строк таблицы с верхней и нижней сторон бумаги должныбыть 11 мм
  • Поля между строками '0 мм
  • Строки таблицы должны быть в 4 мм от влево и вправо стороны бумаги
  • 2 мм между каждым столбцом
  • 38 мм ширина x 21,2 мм высота каждая ячейка
  • 13 x строк, 5 столбцов, 13x5 = 65 ячеек

Вот скрипка JS

http://jsfiddle.net/tt13/ZjBrV/

Вопрос

Что я могу сделать в этомдело?Как получить таблицу с условиями, которые я объяснил выше?

Подробно

HTML-таблица выглядит так

<body>
  <table>
    <td> 
     <div class="bcell">
      sample text2<br/>
      <img src="..."/><br/>
      sample text2
     </div>
     </td>
   ....
  </table>
</body>

Использование css ниже для достижения результата печати формата A4, нополучить что-то абсолютно отличное от условий, которые я объяснил выше.

        body {      
            padding:11mm 4mm 0 4mm;
            background: white;
            font-family: Arial;
            width: 210mm;
            font-size:3mm;
        }

        table { 
            page-break-after:always;
            width: 100%;
            height: 275mm;
            margin:0 auto;
            page-break-inside:avoid;                 
            border-collapse: collapse;

        }

        td img {
            height:10mm;
        }

        td {
            width: 38mm;
            height:21.2mm;
            padding: 0 1mm 0 1mm;
            font-style: bold;
            text-align: center; 
            vertical-align:middle;
        }


        tr    { 
            page-break-after:auto;
            page-break-inside:avoid; 
            height:21.2mm;
            margin:0;
            padding:0;
            page-break-inside:avoid;             
        }

Ответы [ 2 ]

2 голосов
/ 05 февраля 2012

Понятно, что вам нужен вывод для печати, и что размеры имеют решающее значение;возможно, вы печатаете на листах с наклейками поцелуев или что-то в этом роде.Кажется маловероятным, что вы когда-либо получите HTML-решение, которое будет давать идеальные по пикселям результаты во всех браузерах и операционных системах.Я рассмотрю два варианта:

  1. Создание сетки в виде изображения и отображение ее на веб-странице для печати. ​​
  2. Создание сетки в виде PDF для загрузки и печати.

Во всех серверных средах есть библиотеки для выполнения обеих этих задач.По моему опыту, # 2 дает лучшие результаты.

1 голос
/ 05 февраля 2012

Css не эффективен при изменении ширины элементов ячейки таблицы. Вам нужно либо обернуть содержимое ячейки в div или span и использовать td: first-child, чтобы установить ширину в css, либо использовать модель таблицы css .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...