每行的 MPdf 按钮边框 table
MPdf botton border on every row table
我正在制作一个 Wordpress 模块来预订房间。
现在我使用 mPDF 自动创建预订合同。
mPDF 在创建每行都有边框线的 tables 时遇到问题。
当我创建 table 并在 html 中查看它时,一切看起来都很好。但是,当我使用 mPDF 创建 PDF 时,并没有显示行底边框。
这是我用来生成 pdf 的 html 代码:
.logo
{
display: inline-block;
width: 130;
height: 146;
align: left;
hspace: 12;
}
.headerText
{
display:inline-block;
text-align: right;
float:right;
}
.header{
padding-bottom: 20px;
}
.table{
border-left: thin solid;
border-right: thin solid;
border-bottom: thin solid #000000;
border-top: thin solid;
}
.table{
margin-top: 10px;
margin-bottom: 10px;
border-collapse: collapse;
}
table tr {
border-bottom: 1px solid black;
}
table tr:last-child {
border-bottom: none;
}
.Cell
{
width: 300px;
}
.firstCell
{
border-left: thin;
border-right: thin solid;
border-bottom: thin;
border-top: thin;
}
.smallCell
{
width:150px;
}
.largeCell
{
width: 450px;
}
.row
{
display: block;
}
.koninklijkeLogo
{
width: 30px;
}
.maxSize
{
width: 600px;
}
<table class="table">
<tr class="row">
<td class="smallCell firstCell">Naam:</td>
<td class="largeCell">{%name%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Adres:</td>
<td class="largeCell">{%adres%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Telefoonnummer:</td>
<td class="largeCell">{%phone%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">E-mailadres:</td>
<td class="largeCell">{%mail%}</td>
</tr>
</table>
我可以通过更改一些代码来解决问题吗?或者这是 mPDF 中的错误?
从 this document 开始,最新版本的 mPDF(版本 6)似乎支持 tr
元素的边框。
您使用的是最新版本吗?
也许您可以尝试只对单元格而不是行应用底部边框? (只要确保没有 table 单元格间距或 td
单元格边距,否则您会在边框中看到间隙)。
我正在制作一个 Wordpress 模块来预订房间。 现在我使用 mPDF 自动创建预订合同。
mPDF 在创建每行都有边框线的 tables 时遇到问题。 当我创建 table 并在 html 中查看它时,一切看起来都很好。但是,当我使用 mPDF 创建 PDF 时,并没有显示行底边框。
这是我用来生成 pdf 的 html 代码:
.logo
{
display: inline-block;
width: 130;
height: 146;
align: left;
hspace: 12;
}
.headerText
{
display:inline-block;
text-align: right;
float:right;
}
.header{
padding-bottom: 20px;
}
.table{
border-left: thin solid;
border-right: thin solid;
border-bottom: thin solid #000000;
border-top: thin solid;
}
.table{
margin-top: 10px;
margin-bottom: 10px;
border-collapse: collapse;
}
table tr {
border-bottom: 1px solid black;
}
table tr:last-child {
border-bottom: none;
}
.Cell
{
width: 300px;
}
.firstCell
{
border-left: thin;
border-right: thin solid;
border-bottom: thin;
border-top: thin;
}
.smallCell
{
width:150px;
}
.largeCell
{
width: 450px;
}
.row
{
display: block;
}
.koninklijkeLogo
{
width: 30px;
}
.maxSize
{
width: 600px;
}
<table class="table">
<tr class="row">
<td class="smallCell firstCell">Naam:</td>
<td class="largeCell">{%name%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Adres:</td>
<td class="largeCell">{%adres%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Telefoonnummer:</td>
<td class="largeCell">{%phone%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">E-mailadres:</td>
<td class="largeCell">{%mail%}</td>
</tr>
</table>
我可以通过更改一些代码来解决问题吗?或者这是 mPDF 中的错误?
从 this document 开始,最新版本的 mPDF(版本 6)似乎支持 tr
元素的边框。
您使用的是最新版本吗?
也许您可以尝试只对单元格而不是行应用底部边框? (只要确保没有 table 单元格间距或
td
单元格边距,否则您会在边框中看到间隙)。