边框和值在PDF中不匹配

Question

当我使用display：inline-block来包装表时会发生这种情况。表本身位于正确的位置（显示为粉红色），但边框向下移动。

这是我使用的代码。这三个表有相同的代码，所以我删除了另外两个。我删除了用于设置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时，会发生这种情况：

桌子没问题，但是不再合适了。

这是我使用float:left的时候：

但是，边界似乎也移动到了最左边

我这样做是因为我不能使用Bootstrap 4的网格系统（使用flex），我需要内联的小divs。

关于这个问题或原因的可能解决方案的任何想法？我希望它排成一行并正确放置边框。所有这些都向我展示了在浏览器中查看时的预期结果，但不是在PDF中。

Answer 1

希望这可以帮助！

您可以在另一个表的每个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>