Граница и значения не совпадают в PDF - PullRequest
Новая
       19

Граница и значения не совпадают в PDF

0 голосов
/ 04 сентября 2018

Это происходит, когда я использую display: inline-block для переноса таблицы. Сама таблица находится в правильном положении (показано розовым цветом) , но граница смещена вниз.

display:inline-block result

Вот код, который я использовал. Три таблицы имеют одинаковый код, поэтому я удалил две другие. И я удалил коды, используемые для настройки dompdf

<div style="display: inline-block;">
    <table class="table-bordered" style="background-color: pink;">
        <tbody>
            <tr>
                <th colspan="2" class="text-left p-2">
                    <p class="mb-0">
                        Some Name
                    </p>
                    <p class="mb-0">
                        Some Date
                    </p>
                </th>
            </tr>
            <tr>
                <td class="text-left p-1">
                    DATA
                </td>
                <td class="p-1">
                    VALUE
                </td>
            </tr>
            <tr>
                <td class="text-left p-1">
                    DATA
                </td>
                <td class="p-1">
                    VALUE
                </td>
            </tr>
        </tbody>
    </table>
</div>

Когда я вместо этого использую display: inline-table, это происходит:

display:inline-table result

Таблица в порядке, но больше не соответствует.

И это когда я использовал float:left:

float:left result

В линии, но, кажется, граница также сдвинута в крайнюю левую сторону

Я делаю это, потому что я не могу использовать систему сетки Bootstrap 4 (использует flex) , и мне нужны маленькие divs, которые встроены.

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

1 Ответ

0 голосов
/ 04 сентября 2018

Надеюсь, это поможет!

Вы можете добавить три таблицы внутри каждой td другой таблицы. 

<table style="table-layout:fixed;margin:0 auto;">
	<tbody>
		<tr>
			<td style="vertical-align:top;">
				<div style="display: inline-block;">
					<table class="table-bordered" style="background-color: pink;table-layout: fixed;border-collapse: collapse;">
						<tbody>
							<tr>
								<th colspan="2" class="text-left p-2" style="border: 1px solid #000;">
									<p class="mb-0">
										Some Name
									</p>
									<p class="mb-0">
										Some Date
									</p>
								</th>
							</tr>
							<tr>
								<td class="text-left p-1" style="border: 1px solid #000;">
									DATA
								</td>
								<td class="p-1" style="border: 1px solid #000;">
									VALUE
								</td>
							</tr>
							<tr>
								<td class="text-left p-1" style="border: 1px solid #000;">
									DATA
								</td>
								<td class="p-1" style="border: 1px solid #000;">
									VALUE
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</td>
			<td style="vertical-align:top;">
				<div style="display: inline-block;">
					<table class="table-bordered" style="background-color: pink;table-layout: fixed;border-collapse: collapse;">
						<tbody>
							<tr>
								<th colspan="2" class="text-left p-2" style="border: 1px solid #000;">
									<p class="mb-0">
										Some Name
									</p>
									<p class="mb-0">
										Some Date
									</p>
								</th>
							</tr>
							<tr>
								<td class="text-left p-1" style="border: 1px solid #000;">
									DATA
								</td>
								<td class="p-1" style="border: 1px solid #000;">
									VALUE
								</td>
							</tr>
							<tr>
								<td class="text-left p-1" style="border: 1px solid #000;">
									DATA
								</td>
								<td class="p-1" style="border: 1px solid #000;">
									VALUE
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</td>
			<td style="vertical-align:top;">
				<div style="display: inline-block;">
					<table class="table-bordered" style="background-color: pink;table-layout: fixed;border-collapse: collapse;">
						<tbody>
							<tr>
								<th colspan="2" class="text-left p-2" style="border: 1px solid #000;">
									<p class="mb-0">
										Some Name
									</p>
									<p class="mb-0">
										Some Date
									</p>
								</th>
							</tr>
							<tr>
								<td class="text-left p-1" style="border: 1px solid #000;">
									DATA
								</td>
								<td class="p-1" style="border: 1px solid #000;">
									VALUE
								</td>
							</tr>
							<tr>
								<td class="text-left p-1" style="border: 1px solid #000;">
									DATA
								</td>
								<td class="p-1" style="border: 1px solid #000;">
									VALUE
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</td>
		</tr>
	</tbody>
</table>
...