CODEWITHSUNDEEP
htmlcsswkhtmltopdf
physicist
physicist

Reputation: 904

Center Align Table - wkhtmlpdf

Trying to convert a HTML to PDF using wkhtmltopdf.

I want the table in the generated PDF to be at the center but the table represented here in HTML always aligns left in the created PDF?

What could be going wrong?

PS: I am new to the front-end altogether. I think i am making some small mistake in styling.

<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>

The style sheet has 

.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;
}

Upvotes: 1

Views: 3020

Answers (2)

Tien Liang
Tien Liang

Reputation: 245

If I understand your question correctly, you can add

#infoTable{
    margin: 0 auto;
}

This simply center-align the table in .divGeneral which is width:100%.

I also removed some css code that has no effect in the current task.

Please run the code below to see if this is what you want. 

.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>

Upvotes: 2

Pushparaj
Pushparaj

Reputation: 1080

Use flexbox method.I hope this will work for you.

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

Upvotes: 0

Related Questions