Topic: Table cell vertical alignment in html to word not working

Posted by queejie · 23-01-2019 - 15:55

I can't seem to get vertical alignment to take, when translating HTML to Word. I am using vertical-align: top, and the HTML side works fine, with or without the !important. The Word doc ignores it. Wish I could paste a picture here to demonstrate the results. There is nothing in the td cells except text (no divs, p's, etc.).

        table.checklist td, table.checklist.th {
            vertical-align: top !important;
        }

Posted by admin · 23-01-2019 - 17:55

Hello,

We have done some quick tests and everything is working correctly.

The following script illustrates a basic sample:

$docx = new CreateDocx();

$html .=
'
<style>
tr {
    height: 100px;
}
td {
    vertical-align: bottom;
}
.td_middle {
    vertical-align: middle;
}
.td_top {
    vertical-align: top;
}
</style>
<table border="1" style="border-collapse: collapse" width="600">
    <tbody>
        <tr width="600">
            <td style="background-color: yellow">1_1</td>
            <td rowspan="3" colspan="2">1_2</td>
        </tr>
        <tr width="600">
            <td>Some random text.</td>
        </tr>
        <tr width="600">
            <td class="td_middle">
                <ul>
                    <li>One</li>
                    <li>Two <b>and a half</b></li>
                </ul>
            </td>
        </tr>
        <tr width="600">
            <td class="td_middle">3_2</td>
            <td class="td_top">3_3</td>
            <td class="td_top">3_3</td>
        </tr>
    </tbody>
</table>
';
$docx->embedHTML($html);

$docx->createDocx('output');

As you check in the DOCX output, the td contents are correctly aligned. We recommend you run the script standalone and then compare it with your code to find any issue, maybe other styles are overwriting the CSS you point out.

Regards.

Posted by queejie · 23-01-2019 - 19:18

Thank you. The only real difference in our code is that you are specifying fixed widths and heights for TD and TR elements. Could that be the source of the problem?

Posted by admin · 24-01-2019 - 08:55

Hello,

If you remove width and height values, the vertical-align is correctly set as well:

$html .=
'
<style>
td {
    vertical-align: bottom;
}
.td_middle {
    vertical-align: middle;
}
.td_top {
    vertical-align: top;
}
</style>
<table border="1" style="border-collapse: collapse">
    <tbody>
        <tr>
            <td style="background-color: yellow">1_1</td>
            <td rowspan="3" colspan="2" class="td_middle">1_2</td>
        </tr>
        <tr>
            <td>Some random text.</td>
        </tr>
        <tr>
            <td class="td_middle">
                <ul>
                    <li>One</li>
                    <li>Two <b>and a half</b></li>
                </ul>
            </td>
        </tr>
        <tr>
            <td class="td_middle">3_2</td>
            <td class="td_top">3_3</td>
            <td class="td_top">3_3</td>
        </tr>
    </tbody>
</table>
';
$docx->embedHTML($html);

we set a height value in the previous sample to illustrate the use of vertical-align. We recommend you to run this script standalone and check its output, and also check/debug your script to find the source of the issue.

Regards.

Forum