HTML

Question

我尝试在 HTML table 中设置图像和文本的对齐方式并使用 jsPDF 生成 pdf，但我无法设置正确的图像与文本对齐方式，您的帮助节省了我的时间

[![在此处输入图片描述][1]][1]

这是我的代码，非常感谢您的帮助

<html>
    <head>
        <title>Theme1</title>
    </head>
    <body>
        <table style="width: 565px;margin: 15px; border:4px solid #ddd;font-size: 12px;position: relative; color: #212529">
            <tr style="width: 100%">
                <td style="width: 100%">       
                    <table>
                        <tr>
                            <th style="text-align: center;" colspan="3" width="100%">
                                <h4>Biodata</h4>
                            </th>
                        </tr>
                        <tr rowspan="4">
                            <td colspan="2" style="padding: 15px; width: 80%">
                                <table>
                                    <tr>
                                        <td style="width: 50%">
                                            <b>Name</b>
                                        </td>
                                        <td style="width: 50%">
                                            {{name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 50%">
                                            <b>Father Name</b>
                                        </td>
                                        <td style="width: 50%">
                                            {{fatherName}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 50%">
                                            <b>Father's Occupation</b>
                                        </td>
                                        <td style="width: 50%">
                                            {{fatherOccupation}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 50%">
                                            <b>Mother Name</b>
                                        </td>
                                        <td style="width: 50%">
                                            {{motherName}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 50%">
                                            <b>Mother's Occupation</b>
                                        </td>
                                        <td style="width: 50%">
                                            {{motherOccupation}}
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td style="width: 20%">
                                <img src="{{profileImage}}" width="100" style="border-radius: 5px; border-width: 1px ;border-color: #4e555b; border-style: solid; width: 100px;" />
                            </td>  
                        </tr>
                        <tr>
                            <td width="35%">
                                <b>email</b>
                            </td>
                            <td width="35%">
                                {{email}}
                            </td>
                        </tr>
                        <tr>
                            <td width="35%">
                                <b>Date of Birth</b>
                            </td>
                            <td width="35%">
                                {{dob}}
                            </td>
                        </tr>
                        <tr>
                            <td width="35%">
                                <b>Place of Birth</b>
                            </td>
                            <td width="35%">
                                {{placeOfBirth}}
                            </td>
                        </tr>
                        <tr>
                            <td width="35%">
                                <b>Occupation</b>
                            </td>
                            <td width="35%">
                                {{occupation}}
                            </td>
                        </tr>
                     </table>
                </td>
            </tr>
        </table>
    </body>
    </html>

试了一天还是不行

Answer 1

如果我正确地解释了你的目标状态，这可能会帮助你实现你想要的。

<span style="display: flex; justify-content:center; margin-top:2em">
  <h1>Biodata</h1></span>
<table style="margin-left: 2em;text-align:left">
  <tr>
    <th>Name</th>
    <td>{{name}}</td>
    <td rowspan=5 style="background-color: red;">Image here</td>
  </tr>
  <tr>
    <th>Father's name</th>
    <td>{{fathersName}}</td>
  </tr>
  <tr>
    <th>Mother's name</th>
    <td>{{mothersName}}</td>
  </tr>
  <tr>
    <th>Mother's occupation</th>
    <td>{{mothersOccupation}}</td>
  </tr>
  <tr>
    <th>eMail address</th>
    <td>{{emailAddress}}</td>
  </tr>
  <tr>
    <th>Date of Birth</th>
    <td>{{dateOfBirth}}</td>
  </tr>
  <tr>
    <th>Place of Birth</th>
    <td>{{placeOfBirth}}</td>
  </tr>
  <tr>
    <th>Occupation</th>
    <td>{{occupation}}</td>
  </tr>
</table>

HTML - 在 html table 中设置正确的图像和文本对齐方式

HTML - Set proper alignment of image and text in html table

javascript

css

jspdf

reactjs