title: Creating a jsPDF-Autotable with fixed column widths determining table width
body: <p>I need to present a table transposed from the usual manner data is presented (i.e. in the table required, each record is represented by a column, and each field is represented by a row).</p>
  
  <p>I would like each column aside from the 1st (header column) to have the same width.</p>
  
  <p>Overflowing columns will be in a new table sitting below the table above (see below).</p>
  
  <p>For the final table (which will usually have a different number of columns to the table sitting above it), the width of the columns should be the same.</p>
  
  <p>Therefore in the .PDF generated by the snippet below, the 2 tables should align as so (<em>noting the exact number of cells will differ</em>):</p>
  
  <pre><code>+-----+----+----+----+----+----+----+----+----+----+----+
  |Day  | 1  | 2  | 3  | 4  | 5  | 6  | 7  | 8  | 9  | 10 |
  +-----+----+----+----+----+----+----+----+----+----+----+
  +-----+----+----+----+----+
  |Day  | 11 | 12 | 13 | 14 |
  +-----+----+----+----+----+
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// generating the data for the table
  const cols = 14;
  const headers = (new Array(cols + 1)).fill(0).map((x,i) =&gt; (i).toString());
  headers[0] = 'DAY #:';
  const today = new Date();
  const data = [headers.map((x, i) =&gt; {
      const date = new Date(today);
      date.setDate(date.getDate() + i);
      return date.toLocaleDateString(navigator.languages);
    }),
    headers.map((x, i) =&gt; (1 - i / cols).toPrecision(3)),
  ];
  data[0][0] = "Date:"
  data[1][0] = "Dose:"
  
  // splitting the table data at 10 columns + rowHeader wide
  const maxCols = 10;
  const tables = [];
  const tableCount = Math.ceil(cols/maxCols)
  for (let i = 0; i &lt; tableCount; ++i) {
    const slicePos = 1 + i * maxCols;
    const mapColsInRange = (d) =&gt; [d[0]].concat(d.slice(slicePos, slicePos + maxCols));
    tables.push({
      headers: mapColsInRange(headers),
      data: data.map(mapColsInRange),
    });
  }
  // creating the tables
  const doc = new jsPDF('l', 'mm', 'a4');
  for (const t of tables) {
    doc.autoTable({
      theme: 'grid',
      head: [ t.headers ],
      body: t.data,
      pageBreak: 'avoid',
      styles: { halign: 'center', cellWidth: 21 },
      columnStyles: { 0: { halign: 'left', fontStyle: 'bold', cellWidth: 34 }},
    });
  }
  doc.save('test.pdf');</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.1.4/jspdf.plugin.autotable.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can the columns be aligned using jsPDF-autoTable options?</p>