CODEWITHSUNDEEP
javascriptnode.jsdocx
lbragile
lbragile

Reputation: 8122

How can I remove table borders with DocxJS?

Let's say I want to remove all of the borders from this table:

---------------------------
|   image    |    text    |
---------------------------

Following the documentation online: https://docx.js.org/#/usage/tables

new Table({
   borders: {
              top: {style: BorderStyle.NONE},
              bottom: {style: BorderStyle.NONE},
              left: {style: BorderStyle.NONE},
              right: {style: BorderStyle.NONE},
            },
    rows: [
      new TableRow({
        children: [
          new TableCell({
            children: [
              new Paragraph({ children: [some_image_file] }),
            ],
          }),
          new TableCell({
            children: [
              new Paragraph({ text: "text" }),
            ],
          }),
        ],
      }),
     ],
  })

This gives:

   image    |    text

According to the documentation, moving the border options inside the TableCell should impact the cell's borders, but I see no results when I do so. Any ideas how to achieve a table without any borders?

Upvotes: 1

Views: 2613

Answers (2)

Karl
Karl

Reputation: 1854

For me, using DocxJS v. 8.2.3, using BorderStyle.NIL worked to remove cell borders.

new TableCell({
   borders: {
          top: {style: BorderStyle.NIL },
          bottom: {style: BorderStyle.NIL },
          left: {style: BorderStyle.NIL },
          right: {style: BorderStyle.NIL },
        },

I had no need to set either the size or the color.

Now users can print on buff colored paper and not see faint white cell borders.

Upvotes: 1

lbragile
lbragile

Reputation: 8122

As mentioned by @cbloss793, It seems that border options for TableCell must also contain the size: 0 attribute to remove the corresponding border. I also added color: "FFFFFF" just to be safe.

...
new TableCell({
   borders: {
          top: {style: BorderStyle.NONE, size: 0, color: "FFFFFF"},
          bottom: {style: BorderStyle.NONE, size: 0, color: "FFFFFF"},
          left: {style: BorderStyle.NONE, size: 0, color: "FFFFFF"},
          right: {style: BorderStyle.NONE, size: 0, color: "FFFFFF"},
        },
...

Upvotes: 6

Related Questions