How to set table width percentage using office js

user3879133

I am working on Office JS word addin project. I am creating a table with 4 columns. I want to set width percentage to 30%,30%,20%,20% respectively. How can I set table width percentake like this. Below is a sample code I am using for table creation

function createTable() {    
  Word.run(function (context) {
    var body = context.document.body;
    var Table = body.insertTable(2, array.length, Word.InsertLocation.start, [array]);    
    return context.sync();
  })
  .catch(errorHandler);
}
Cindy Meister

The Word JS API has no capability (yet) for specificying how a table's columns should behave. It just assumes the default, which means the columns will adjust to their content.

So the only solution is to work with the Word Open XML. Simplest would probably be to insert the entire table (at least the basic structures) using the OOXML methods of the Word JS API, rather than trying to change (replace) an existing table.

The column width, when set as a percentage, is controlled in a number of elements that define the table. This link to OfficeOpenXML.com may be useful.

The following Word Open XML, generated using the COM object model and the property Table.Range.WordOpenXML, illustrates the basic table structures of a table formatted as a percent of the page width (w:tblW), and cells as a percentage of the table's width (w:tcW). The table had two columns, set to 20% and 80%. Note that Word will minimally adjust the percentages based on its layout algorithm, so the actual percentage used in always an approximation.

The w:gridCol settings also reflect these proportions.

Besides the percentages, the w:type attribute is important. It tells Word how to interpret the width settings: w:type="pct" specifies "percent".

The values may see quite large, that's because they're a fifths of a percent. So 5000 is 100%.

<w:tbl>
  <w:tblPr><w:tblStyle w:val="TableGrid"/>
           <w:tblW w:w="5000" w:type="pct"/>
           <w:tblLayout w:type="fixed"/>
           <w:tblLook w:val="04A0" w:firstRow="1" w:lastRow="0" w:firstColumn="1" w:lastColumn="0" w:noHBand="0" w:noVBand="1"/>
  </w:tblPr>
  <w:tblGrid><w:gridCol w:w="944"/><w:gridCol w:w="3700"/></w:tblGrid>
  <w:tr>
    <w:tc><w:tcPr><w:tcW w:w="1016" w:type="pct"/></w:tcPr>
          <w:p/>
    </w:tc><w:tc><w:tcPr><w:tcW w:w="3984" w:type="pct"/></w:tcPr>
          <w:p/>
    </w:tc><
  /w:tr>
</w:tbl>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

How to set the connection of associated table in CakePHP

분류에서Dev

Accessing SharePoint using Microsoft Graph through Office Add-in (Word JS)

분류에서Dev

How to set canvas width to width of canvas objects/text

분류에서Dev

How to hide or remove column from data table or set it invisible using flutter

분류에서Dev

How to get real width td table

분류에서Dev

How to draw a percentage of an outline of a circle

분류에서Dev

How to stop table from adjusting width

분류에서Dev

Set min-width in HTML table's <td>

분류에서Dev

How do you disable the set width of parent element for child element?

분류에서Dev

how to set one field in a table equal to another field in a table in access

분류에서Dev

How to set the linear layout width in a HorizontalScrollView?

분류에서Dev

JS: How to make logic (using loops) to insert data into this table?

분류에서Dev

How to increase tick label width in d3.js axis

분류에서Dev

How to set cx and cy with only one function using d3.js, force and network?

분류에서Dev

keep column width using responsive table bootstrap3

분류에서Dev

How to do percentage in Postgresql

분류에서Dev

How can i achieve truncated text in a responsive width table column?

분류에서Dev

Access Exchange or Office 365 API using Meteor JS?

분류에서Dev

How to set column width in absolute units

분류에서Dev

Calculate percentage to total using rowPercents

분류에서Dev

Width of table cell with absolute content

분류에서Dev

how to increase the width of an element without using any loops

분류에서Dev

How to search a table using JS and return only the matching row?

분류에서Dev

How to create a table using a loop?

분류에서Dev

Calculating percentage difference between rows on table

분류에서Dev

Calculating percentage difference between rows on table

분류에서Dev

How to make an html table deliberately exceed the width of its container?

분류에서Dev

How to set maximum video width in ffmpeg?

분류에서Dev

table width not set in iTextSharp when converting html to PDF

Related 관련 기사

  1. 1

    How to set the connection of associated table in CakePHP

  2. 2

    Accessing SharePoint using Microsoft Graph through Office Add-in (Word JS)

  3. 3

    How to set canvas width to width of canvas objects/text

  4. 4

    How to hide or remove column from data table or set it invisible using flutter

  5. 5

    How to get real width td table

  6. 6

    How to draw a percentage of an outline of a circle

  7. 7

    How to stop table from adjusting width

  8. 8

    Set min-width in HTML table's <td>

  9. 9

    How do you disable the set width of parent element for child element?

  10. 10

    how to set one field in a table equal to another field in a table in access

  11. 11

    How to set the linear layout width in a HorizontalScrollView?

  12. 12

    JS: How to make logic (using loops) to insert data into this table?

  13. 13

    How to increase tick label width in d3.js axis

  14. 14

    How to set cx and cy with only one function using d3.js, force and network?

  15. 15

    keep column width using responsive table bootstrap3

  16. 16

    How to do percentage in Postgresql

  17. 17

    How can i achieve truncated text in a responsive width table column?

  18. 18

    Access Exchange or Office 365 API using Meteor JS?

  19. 19

    How to set column width in absolute units

  20. 20

    Calculate percentage to total using rowPercents

  21. 21

    Width of table cell with absolute content

  22. 22

    how to increase the width of an element without using any loops

  23. 23

    How to search a table using JS and return only the matching row?

  24. 24

    How to create a table using a loop?

  25. 25

    Calculating percentage difference between rows on table

  26. 26

    Calculating percentage difference between rows on table

  27. 27

    How to make an html table deliberately exceed the width of its container?

  28. 28

    How to set maximum video width in ffmpeg?

  29. 29

    table width not set in iTextSharp when converting html to PDF

뜨겁다태그

보관