居中对齐 Table - wkhtmltopdf

Question

正在尝试使用 wkhtmltopdf 将 HTML 转换为 PDF。

我希望生成的 PDF 中的 table 位于中心，但 HTML 中此处表示的 table 在创建的 PDF 中始终左对齐？

可能出了什么问题？

PS: 完全是前端新手。我想我在造型上犯了一些小错误。

<div class="divGeneral" id="sumDiv">
            <table id="infoTable">
                <tr>
                    <th>Pr Name:&nbsp</th>
                    <td><textarea id="pName" class="noBorderInput" rows="1"></textarea></td>
                </tr>
                <tr>
                    <th>Su Date:&nbsp</th>
                    <td><textarea id="suDate" class="noBorderInput" rows="1"></textarea></td>
                </tr> 
            </table>
        </div>

样式sheet有

.divGeneral {
    width: 100%;
    //float: left;
    text-align: center;
    margin: 0 auto;
    object-fit: cover;
}

#sumDiv {
    // margin-bottom: 50px;
   // display: inline-block;
    // float: none;
    text-align: left;
    margin: 0 auto;
}


#infoTable th {
    border: 0px;
    vertical-align: top;
    padding: 4px 2px 0px 2px;
    width: 180px;
    text-align: right;
    margin-left: auto;
    margin-right: auto;
}

#infoTable td {
    border: 1px solid black;
    padding: 3px 3px 2px 3px;
    text-align: left;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
}
textarea
{
    margin: 0px;
}
textarea .multiline{
    margin-top: 2px;
}

Answer 1

如果我理解正确你的问题，你可以添加

#infoTable{
    margin: 0 auto;
}

这只是 center-align .divGeneral 中的 table 即 width:100%.

我还删除了一些对当前任务没有影响的css代码。

请运行下面的代码看看这是不是你想要的。

.divGeneral {
    width: 100%;
    object-fit: cover;
}

#sumDiv {
    text-align: left;
    margin: 0 auto;
}

#infoTable{
 margin: 0 auto;
}

#infoTable th {
    vertical-align: top;
    padding: 4px 2px 0px 2px;
    text-align: right;
}

#infoTable td {
    border: 1px solid black;
    padding: 3px 3px 2px 3px;
    text-align: left;
    vertical-align: top;
}

textarea .multiline{
    margin-top: 2px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="divGeneral" id="sumDiv">
  <table id="infoTable">
     <tr>
       <th>Pr Name:&nbsp</th>
       <td><textarea id="pName" class="noBorderInput" rows="1"></textarea></td>
     </tr>
     <tr>
       <th>Su Date:&nbsp</th>
       <td><textarea id="suDate" class="noBorderInput" rows="1"></textarea></td>
     </tr> 
  </table>
</div>

</body>
</html>

Answer 2

使用 flexbox method.I 希望这对你有用。

.divGeneral {
    display:flex;
    justify-content:center;
    align-items:center;
}

居中对齐 Table - wkhtmltopdf

Center Align Table - wkhtmlpdf

html

css

wkhtmltopdf