边框和值在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>