Issue with inline css , styles ignored in aspose word

  • facing the issue with aspose word , it is ignoring style applied to table td .
  • style width is not applied to the table td.

Below is html code , when tried to load it word document and save it aspose word ignoring the styles applied to the table tr td., e.g. width:100px applied to td.

<!DOCTYPE html>
    <head>
      <style>
        table {
          box-sizing: inherit;
          white-space: inherit;
          line-height: inherit;
          font-weight: inherit;
          font-size: inherit;
          color: inherit;
          font-style: inherit;
          text-align: inherit;
          font-variant: inherit;
          border-collapse: collapse;
          empty-cells: show;
          max-width: 100% !important;
          layout: fixed;
        }

        table.fr-dashed-borders td,
        table.fr-dashed-borders th {
          border-style: dashed;
        }

        table.fr-alternate-rows tr:nth-child(2n) {
          background: whitesmoke;
        }

        table td,
        table th {
          border: 0px solid black;
        }

        table td:empty,
        table th:empty {
          height: 20px;
        }

        table td.fr-highlighted,
        table th.fr-highlighted {
          border: 1px double red;
        }

        table td.fr-thick,
        table th.fr-thick {
          border-width: 2px;
        }

        table th {
          background: #ececec;
          text-align: left;
        }

        table td {
          word-wrap: initial;
          overflow: hidden;
        }

        table.cp-border-all-cells td {
          border: 1px solid #000000 !important;
          padding: 5px;
        }

        table.cp-border-all-cells th {
          border-bottom: 1px solid #000000 !important;
        }

        table.cp-border-table {
          border: solid 2px #000000 !important;
        }
      </style>
    </head>
    <body>
      <div>
        <table cellpadding=2 cellspacing=3 width="100%">
          <tr>
            <td style="width:15px;">&nbsp;&nbsp;</td>
            <td colspan="1">
              <p style="page-break-after:avoid;">
              <table class="cp-border-all-cells" style="width: 100%;">
                <tbody>
                  <tr>
                    <td colspan="2" style="vertical-align: top;">first default-asd as fdds fgh fg hfghfgh fghgfhfg f fghgf fgh fghfghf hfghfghasd as fdds fgh fg hfghfgh fghgfhfg f fghgf fgh fghfghf hfghfghasd as fdds fgh fg hfghfgh fghgfhfg f fghgf fgh fghfghf hfghfghasd as fdds fgh fg hfghfgh fghgfhfg f fghgf fgh fghfghf hfghfgh <br>
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 100px !important; vertical-align: top;">LAbel Text</td>
                    <td style="vertical-align: top;">Random text</td>
                  </tr>
                </tbody>
              </table>
              <br>
              <br>
              <br>
              </p>
            </td>
          </tr>
        </table>
      </div>
      <body>
  </html>

@abdulkadirsabirbohari

The query is related to Aspose.Words, so we are moving it to the respective category where you will be assisted shortly.

@abdulkadirsabirbohari As I can see the table cell width is applied properly. But by default MS Word uses fit to content table auto fit behavior, so the width specified in one cell is not taken into account. If you open your document in MS Word you will see the same behavior: ms.docx (12.5 KB)

You can use the following code to fix the problem:

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

foreach (Table t in doc.GetChildNodes(NodeType.Table, true))
    t.AutoFit(AutoFitBehavior.FixedColumnWidths);

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

by using this code , it applies the css for the column but the table format is broke. as you can see right side of the table , it is not complete view of my table. Please look into this asap

code is working fine for column width , but it broke the table width and ui , as you can see right side of the table in image.

@abdulkadirsabirbohari The problem occurs because there is nested table in your document. When you autofit the outer table to fixed column widths the inner table cannot fit the available space and is cropped. You can work the problem around by autofitting the outer table to contents and the inner table to fixed column width:

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

// Auto fit the top talbe to contents.
Table topTable = doc.FirstSection.Body.Tables[0];
topTable.AutoFit(AutoFitBehavior.AutoFitToContents);

// Autofit the inner table to fixed column widths.
foreach (Table t in topTable.GetChildNodes(NodeType.Table, true))
    t.AutoFit(AutoFitBehavior.FixedColumnWidths);

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

out.docx (7.4 KB)

Alternatively you can avoid using nested tables in your HTML documents.

this code applies the css to the table, but why it breaking the second row column width, see the result below of this code looks like.

@abdulkadirsabirbohari Unfortunately, I cannot reproduce such output on my side using your input HTML and the code provided in my previous post. Please see the output DOCX document attached in my previous answer.
Could you please attach your input HTML and output DOCX document produced on your side? We will check the issue and provide you more information.

you can check the html below

<html>
<head>
    <style>
        table {
            box-sizing: inherit;
            white-space: inherit;
            line-height: inherit;
            font-weight: inherit;
            font-size: inherit;
            color: inherit;
            font-style: inherit;
            text-align: inherit;
            font-variant: inherit;
            border-collapse: collapse;
            empty-cells: show;
            max-width: 100% !important;
            layout: fixed;
        }

            table.fr-dashed-borders td,
            table.fr-dashed-borders th {
                border-style: dashed;
            }

            table.fr-alternate-rows tr:nth-child(2n) {
                background: whitesmoke;
            }

            table td,
            table th {
                border: 0px solid black;
            }

                table td:empty,
                table th:empty {
                    height: 20px;
                }

                table td.fr-highlighted,
                table th.fr-highlighted {
                    border: 1px double red;
                }

                table td.fr-thick,
                table th.fr-thick {
                    border-width: 2px;
                }

            table th {
                background: #ececec;
                text-align: left;
            }

            table td {
                word-wrap: initial;
                overflow: hidden;
            }

            table.cp-border-all-cells td {
                border: 1px solid #000000 !important;
                padding: 5px;
            }

            table.cp-border-all-cells th {
                border-bottom: 1px solid #000000 !important;
            }

            table.cp-border-table {
                border: solid 2px #000000 !important;
            }
    </style>
</head>
<body>
    <div>
        <table cellpadding="2" cellspacing="3" width="100%">
            <tr>
                <td style="width:15px;">&nbsp;&nbsp;</td>
                <td colspan="1">
                    <p style="page-break-after:avoid;">
                        <table class="cp-border-all-cells" style="width: 100%;">
                            <tbody>
                                <tr>
                                    <td colspan="2" style="vertical-align: top;">first default-asd as fdds fgh fg hfghfgh fghgfhfg f fghgf fgh fghfghf hfghfghasd as fdds fgh fg hfghfgh fghgfhfg f fghgf fgh fghfghf hfghfghasd as fdds fgh fg hfghfgh fghgfhfg f fghgf fgh fghfghf hfghfghasd as fdds fgh fg hfghfgh fghgfhfg f fghgf fgh fghfghf hfghfgh</td>
                                </tr>
                                <tr>
                                    <td style="width: 100px !important; vertical-align: top;">LAbel Text</td>
                                    <td style="vertical-align: top;">Random text</td>
                                </tr>
                            </tbody>
                        </table>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

@abdulkadirsabirbohari The following code produces correct output result:

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

// Auto fit the top talbe to contents.
Table topTable = doc.FirstSection.Body.Tables[0];
topTable.AutoFit(AutoFitBehavior.AutoFitToContents);

// Autofit the inner table to fixed column widths.
foreach (Table t in topTable.GetChildNodes(NodeType.Table, true))
    t.AutoFit(AutoFitBehavior.FixedColumnWidths);

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

out.docx (7.4 KB)

You can check attached document.
document (2).zip (7.1 KB)

@abdulkadirsabirbohari Could you please provide your code or create a simple console application that will allow us to reproduce the problem?
Also, it looks like the attached document was not produced by Aspose.Words or was postprocessed after generation.

AsposeTest.zip (121.0 KB)
not able to share complete code, I share some used by my method in attached console application .
PFA

@abdulkadirsabirbohari Could you please also attach your test HTML "C:\\Users\\Abdulkadar.Bohari\\Desktop\\test2.html". The earlier provided HTML files does not contain [AgendaContent] placeholders. Or include the files required to reproduce the problem in to the console application so we can run it and reproduce the problem.

you can use earlier HTML , and [AgendaContent] place holder is not der in html because I provide final html where all the value of plae holder are filled… attaching the html file welltest2.zip (865 Bytes)

@abdulkadirsabirbohari Unfortunately, I still cannot reproduce the problem on my side. Here is the output document produced by your application and the attached HTML document: out.zip (11.0 KB)

share you code and project where you are running this

@abdulkadirsabirbohari I run your test project you have attached earlier. Just changed saving to stream to saving to the file.

can you please send me working copy …

@abdulkadirsabirbohari Sure, but this is the exactly the same project you have attached earlier. Only paths have been changed. AsposeTest.zip (3.0 KB)