Tables with Images in Multiple Columns Do Not Fit Page Width

Aspose.Words Product Family
1

When generating a Word document using Aspose.Words, tables containing images arranged in multiple columns do not fit within the page width. Additionally, the HTML sample provided is rendered correctly in html but is not rendered in the output word document.
Steps to Reproduce

  1. Create an HTML table with multiple columns and insert images in each column using the provided sample.
  2. Convert the HTML to a Word document using Aspose.Words.
  3. Open the generated Word file.

Expected Behavior
• The table should respect the page width and adjust columns accordingly as rendered in HTML

Actual Behavior
• The table overflows beyond the page width.

Can we achieve the html rendering format in the word generated? Why is the rendering different in Aspose?

Sample

Fixed Width Table with Images body { font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5; } 
.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.image-table {
    width: 600px;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0 auto;
    border: 2px solid #ddd;
}

.image-table td {
    /* Width automatically distributed among columns */
    height: 150px;
    padding: 5px;
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
    background-color: #f9f9f9;
}

.image-table img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.image-table img:hover {
    transform: scale(1.05);
}

.info {
    text-align: center;
    margin-top: 20px;
    color: #666;
    font-size: 14px;
}

.specs {
    background-color: #e8f4f8;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.specs h3 {
    margin-top: 0;
    color: #2c3e50;
}

.specs ul {
    margin: 10px 0;
    padding-left: 20px;
}

Fixed Width Table with Resized Images

Table Specifications:

  • Table width: Fixed at 600 pixels
  • Columns: Any number (automatically distributed)
  • Rows: 1
  • Images: Automatically resized to fit cells
  • Layout: Fixed table layout with equal column distribution
<h2 style=""text-align: center; color: #2c3e50;"">Example: 4 Columns</h2>
<table class=""image-table"">
    <tr>
        <td>
            <img src=""images/TableWithImagescolgro.002.jpeg"" alt=""Sample Image 1"">
        </td>
        <td>
            <img src=""images/TableWithImagescolgro.002.jpeg"" alt=""Sample Image 2"">
        </td>
        <td>
            <img src=""images/TableWithImagescolgro.003.jpeg"" alt=""Sample Image 3"">
        </td>
        <td>
            <img src=""images/TableWithImagescolgro.004.jpeg"" alt=""Sample Image 4"">
        </td>
    </tr>
</table>

<h2 style=""text-align: center; color: #2c3e50; margin-top: 40px;"">Example: 3 Columns</h2>
<table class=""image-table"">
    <tr>
        <td>
            <img src=""images/TableWithImagescolgro.005.jpeg"" alt=""Sample Image 5"">
        </td>
        <td>
            <img src=""images/TableWithImagescolgro.006.jpeg"" alt=""Sample Image 6"">
        </td>
        <td>
            <img src=""images/TableWithImagescolgro.007.jpeg"" alt=""Sample Image 7"">
        </td>
    </tr>
</table>

<h2 style=""text-align: center; color: #2c3e50; margin-top: 40px;"">Example: 6 Columns</h2>
<table class=""image-table"">
    <tr>
        <td>
            <img src=""images/280-800x600.jpg"" alt=""Sample Image 8"">
        </td>
        <td>
            <img src=""images/280-800x600.jpg"" alt=""Sample Image 9"">
        </td>
        <td>
            <img src=""images/280-800x600.jpg"" alt=""Sample Image 10"">
        </td>
        <td>
            <img src=""images/280-800x600.jpg"" alt=""Sample Image 11"">
        </td>
        <td>
            <img src=""images/280-800x600.jpg"" alt=""Sample Image 12"">
        </td>
        <td>
            <img src=""images/280-800x600.jpg"" alt=""Sample Image 13"">
        </td>
    </tr>
</table>

<div class=""info"">
    <p><strong>Note:</strong> The table automatically adapts to any number of columns while maintaining the 600px total width. Each column gets equal space, and images resize proportionally to fit their cells.</p>
    <p><strong>Key Features:</strong></p>
    <ul style=""text-align: left; display: inline-block;"">
        <li>4 columns → 150px each</li>
        <li>3 columns → 200px each</li>
        <li>6 columns → 100px each</li>
        <li>Any number of columns supported!</li>
    </ul>
    <p>Hover over images to see a subtle zoom effect!</p>
</div>
________________________________________ Environment • Aspose.Words Version: 25.7.0 • Platform: .NET
2

@e.scanlan

When converting HTML tables with images to a Word document using Aspose.Words, you may encounter issues where the table does not fit within the page width as expected. This discrepancy can arise due to differences in how HTML and Word handle table layouts and image scaling.

To ensure that your table fits the page width in the generated Word document, you can try the following approaches:

  1. Set Table Width Explicitly: After converting the HTML to a Word document, you can programmatically set the table width to match the page width. Here’s a sample code snippet:

    Document doc = new Document("input.html");
foreach (Table table in doc.GetChildNodes(NodeType.Table, true))
{
    table.PreferredWidth = PreferredWidth.FromPercent(100); // Set table width to 100% of the page width
}
doc.Save("output.docx");

  2. Adjust Image Sizes: Ensure that the images within the table cells are set to scale appropriately. You can set the maximum width for images in the Word document to prevent overflow:

    foreach (Table table in doc.GetChildNodes(NodeType.Table, true))
{
    foreach (Row row in table.Rows)
    {
        foreach (Cell cell in row.Cells)
        {
            foreach (Shape shape in cell.GetChildNodes(NodeType.Shape, true))
            {
                shape.Width = Math.Min(shape.Width, cell.CellFormat.Width); // Adjust image width to fit cell
            }
        }
    }
}

  3. Check HTML Structure: Ensure that your HTML table is structured correctly and that CSS styles are compatible with Word rendering. Some CSS properties may not be fully supported in Word.

By applying these adjustments, you should be able to achieve a more consistent rendering of your HTML table in the Word document.

3

@e.scanlan Could you please zip and attach your problematic input HTML, the produced and expected output documents? We will check your documents and provide you more information.

4

AsposeWordIssue 1.zip (541.9 KB)

5

Here above are the files, thank you @alexey.noskov for your feedback.

6

@e.scanlan Thank you for additional information. Please note, Aspose.Words is designed to work with MS Word documents. HTML documents and MS Word documents object models are quite different and it is not always possible to provide 100% fidelity after conversion one format to another. In most cases Aspose.Words mimics MS Word behavior when work with HTML.
If you convert your HTML to DOCX using MS Word the result is pretty much the same as Aspose.Words output.
Aspose.Words: out.docx (607.9 KB)
MS Word: ms.docx (17.1 KB)

So, Aspose.Words behavior is expected.

You can try resizing shapes in your document to get better result:

Document doc = new Document(@"C:\Temp\in.html");

foreach (Shape s in doc.GetChildNodes(NodeType.Shape, true))
{
    s.AspectRatioLocked = true;
    s.Width = 100;
}

doc.Save(@"C:\Temp\out.docx");

out.docx (655.3 KB)