# Auto-Sizing Tables Proportionally

> This article shows how to resize a table to fit the complete page by adjusting each column proportionally.

- **Author:** Bjoern Meyer
- **Published:** 2021-08-05
- **Modified:** 2026-07-17
- **Description:** This article shows how to resize a table to fit the complete page by adjusting each column proportionally.
- **2 min read** (258 words)
- **Tags:**
  - ASP.NET
  - JavaScript
  - Tables
  - Windows Forms
  - WPF
- **Web URL:** https://www.textcontrol.com/blog/2021/08/05/auto-sizing-tables-proportionally/
- **LLMs URL:** https://www.textcontrol.com/blog/2021/08/05/auto-sizing-tables-proportionally/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2021/08/05/auto-sizing-tables-proportionally/llms-full.txt

---

In another [blog entry](https://www.textcontrol.com/blog/2014/05/08/extending-the-table-object-autosize/llms-full.txt), we demonstrated how to create an extension method to add an auto-size functionality to Text Control Table objects by looping through all cells of the given table, checking the length of all lines and resizing each column based on the longest detected lines.

This article shows how to auto-size a table by resizing all columns proportionally to fit into the current page width:

![AutoSize](https://s1-www.textcontrol.com/assets/dist/blog/2021/08/05/a/assets/ani-tables.webp "AutoSize")

### The Maths

To calculate the required gap (negative or positive), the total available width is required (*maxWidth*). This is the page size minus the left and right margin of the current section. *currentWidth* is calculated by totalizing all column widths in each row. The missing gap is then the maximum width minus the current width of the table row (*destinationWidth*).

![Tables](https://s1-www.textcontrol.com/assets/dist/blog/2021/08/05/a/assets/tables.webp "Tables")

### Windows Forms, WPF, ASP.NET

This missing gap must be distributed proportionally to each cell width in the current row. The following C# code shows how to solve this using the Windows Forms, WPF or ASP.NET Text Control:

```
public static class TableExtender {
		
	public static void AdaptSize(this Table table, TextControl TextControl) {

	  if (table == null)
	    return;

	  TextControl.PageUnit = MeasuringUnit.Twips;

	  // calculate the max available width
	  var maxWidth = TextControl.Sections.GetItem().Format.PageSize.Width -
		    TextControl.Sections.GetItem().Format.PageMargins.Left -
		    TextControl.Sections.GetItem().Format.PageMargins.Right;

	  // loop through all cells
	  for (int row = 1; row <= table.Rows.Count; row++) {

	    // reset the calculated width
	    var currentWidth = 0;

	    // row by row
	    for (int col = 1; col <= table.Columns.Count; col++) {
	      // calculate the complete width of the row
	      currentWidth += table.Cells[row, col].Width;
	    }

	    // calculate the missing gap
	    var destinationWidth = currentWidth - maxWidth;

	    // loop through all columns in current row
	    for (int col = 1; col <= table.Columns.Count; col++) {

	      // calculate the ratio percentage for each cell
	      float percentage = (float)table.Cells[row, col].Width /
				 (float)currentWidth;

	      // resize the actual cell by it's calculated ratio
	      table.Cells[row, col].Width = (int)(table.Cells[row, col].Width -
					    (destinationWidth * percentage));
	    }

	  }
	}
}
```

This extension method can be called on any table in Text Control:

```
textControl1.Tables.GetItem().AdaptSize(textControl1);
```

### JavaScript

The following JavaScript function shows how to realize this using the JavaScript API of the TX Text Control online document editor:

```
async function adaptTable()
{
 var maxWidth = await getMaxWidth();
 var tableInfo = await getTableInfo();
 
 for (let row = 1; row <= tableInfo.rows ; row++) {
  
  var rowWidth = await getRowWidth(row, 
                                   tableInfo.cols,
                                   tableInfo.table); 
  
  var destinationWidth = rowWidth - maxWidth;  
  
  var tableCheck = await setRowWidth(row, 
                                     tableInfo.cols, 
                                     tableInfo.table, 
                                     destinationWidth, 
                                     rowWidth);
 };
 
 function getMaxWidth() {

  var maxWidth = 0;
  var pageWidth = 0;
  var marginLeft = 0;
  var marginRight = 0;

  return new Promise(resolve => {
  
   TXTextControl.setPageUnit(TXTextControl.MeasuringUnit.Twips, function() {
    TXTextControl.sections.getItem( function (section) {
     section.format.pageSize.getWidth(function (width) { 
      pageWidth = width;
      
      section.format.pageMargins.getLeft(function (left) { 
       marginLeft = left;
       
       section.format.pageMargins.getRight(function (right) { 
        marginRight = right;
        
        resolve(pageWidth - marginLeft - marginRight);
       });});});});});});
 }

 function getTableInfo() {

  var cols = 0;
  var rows = 0;
  
  return new Promise(resolve => {
  
   TXTextControl.tables.getItem( function (table) {
    
    if (table === null)
     return;
   
    table.rows.getCount(function(rowCount) {
     table.columns.getCount(function(colCount) {
     
      var tableInfo = {
       rows: rowCount,
       cols: colCount,
       table: table
      };
     
      resolve(tableInfo);
      
     });});});});
 }

 function getRowWidth(row, colCount, table) {

  
  return new Promise(resolve => {
   var currentWidth = 0;
         
   for (let col = 1; col <= colCount; col++) {
    
    table.cells.getItem(function (cell) {
     cell.getWidth(function (cellWidth) {
      currentWidth = currentWidth + cellWidth;
      
      if (col === colCount)
       resolve(currentWidth);
     });          
    }, null, row, col);};});

 }

 function setRowWidth(row, colCount, table, destinationWidth, currentWidth) {

  return new Promise(resolve => {    
   for (let col = 1; col <= colCount; col++) {
    
    // calculate the ratio percentage for each cell
    table.cells.getItem(function (cell) {
     cell.getWidth(function (cellWidth) {
      var percentage = cellWidth / currentWidth;
      
      cell.setWidth(parseInt(cellWidth - (destinationWidth * percentage)), function() {
       if (col === colCount)
        resolve(true);
      });
      
     });          
    }, null, row, col);};});}
 
}
```

This function can be simply called and will auto-size the table at the current input position:

```
adaptTable();
```

---

## About Bjoern Meyer

As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.

- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)

---

## Related Posts

- [Inserting MergeBlocks with the DataSourceManager and Applying Table Styles in C#](https://www.textcontrol.com/blog/2024/04/09/inserting-mergeblocks-with-the-datasourcemanager-and-applying-table-styles-in-csharp/llms.txt)
- [Useful Tricks for Working with Tables](https://www.textcontrol.com/blog/2023/08/04/useful-tricks-for-working-with-tables/llms.txt)
- [Generating Hierarchical Tables from JSON Data in .NET C#](https://www.textcontrol.com/blog/2023/08/03/generating-hierarchical-tables-from-json-data-in-csharp/llms.txt)
- [Extension Method: Converting Tables to Tabs in C#](https://www.textcontrol.com/blog/2023/03/16/extension-method-converting-tables-to-tabs-in-csharp/llms.txt)
- [Formatting Numbers in Table Cells](https://www.textcontrol.com/blog/2022/06/21/formatting-numbers-in-table-cells/llms.txt)
- [Generating Interactive PDF Forms by Injecting JavaScript](https://www.textcontrol.com/blog/2022/03/31/generating-interactive-pdf-forms-by-injecting-javascript/llms.txt)
- [TX Text Control 34.0 SP4 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2026/05/20/tx-text-control-34-0-sp4-is-now-available/llms.txt)
- [TXTextControl.Markdown.Core 34.1.0-beta: Work with Full Documents, Selection, and SubTextParts](https://www.textcontrol.com/blog/2026/04/14/txtextcontrol-markdown-core-34-1-0-beta-work-with-full-documents-selection-and-subtextparts/llms.txt)
- [TX Spell .NET 11.0 SP1 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2026/04/08/tx-spell-net-11-0-sp1-is-now-available/llms.txt)
- [TX Text Control 34.0 SP2 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2026/02/18/tx-text-control-34-0-sp2-is-now-available/llms.txt)
- [TX Text Control 34.0 SP1 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2025/12/03/tx-text-control-34-0-sp1-is-now-available/llms.txt)
- [Introducing TX Text Control 34.0: Your Next Leap in Document Processing](https://www.textcontrol.com/blog/2025/11/10/introducing-tx-text-control-34-0-your-next-leap-in-document-processing/llms.txt)
- [Sneak Peek: TX Text Control 34.0 Coming November 2025](https://www.textcontrol.com/blog/2025/10/02/sneak-peek-tx-text-control-34-0-coming-november-2025/llms.txt)
- [TX Text Control 33.0 SP3 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2025/08/14/tx-text-control-33-0-sp3-is-now-available/llms.txt)
- [TX Text Control 33.0 SP2 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2025/06/18/tx-text-control-33-0-sp2-is-now-available/llms.txt)
- [Document Lifecycle Optimization: Leveraging TX Text Control's Internal Format](https://www.textcontrol.com/blog/2025/05/16/document-lifecycle-optimization-leveraging-tx-text-controls-internal-format/llms.txt)
- [Expert Implementation Services for Legacy System Modernization](https://www.textcontrol.com/blog/2025/05/07/expert-implementation-services-for-legacy-system-modernization/llms.txt)
- [Service Pack Releases: What's New in TX Text Control 33.0 SP1 and 32.0 SP5](https://www.textcontrol.com/blog/2025/05/07/service-pack-releases-whats-new-in-tx-text-control-33-0-sp1-and-32-0-sp5/llms.txt)
- [Top 5 Real-World Applications for TX Text Control Document Processing Libraries](https://www.textcontrol.com/blog/2025/04/01/top-5-real-world-applications-for-tx-text-control-document-processing-libraries/llms.txt)
- [DWX Developer Week Moves to Mannheim - And Text Control Is on Board!](https://www.textcontrol.com/blog/2025/03/19/dwx-developer-week-moves-to-mannheim-and-tx-text-control-is-on-board/llms.txt)
- [The Wait is Over: TX Text Control for Linux is Officially Here](https://www.textcontrol.com/blog/2025/03/12/the-wait-is-over-tx-text-control-for-linux-is-officially-here/llms.txt)
- [Splitting Tables at Bookmark Positions and Cloning Table Headers](https://www.textcontrol.com/blog/2025/02/13/splitting-tables-at-bookmark-positions-and-cloning-table-headers/llms.txt)
- [Full .NET 9 Support in Text Control .NET Components for ASP.NET Core, Windows Forms, and WPF](https://www.textcontrol.com/blog/2024/11/11/full-net-9-support-in-text-control-net-components-for-asp-net-core-windows-forms-and-wpf/llms.txt)
- [Toggle Field Codes in TX Text Control](https://www.textcontrol.com/blog/2024/11/07/toggle-field-codes-in-tx-text-control/llms.txt)
- [Loading and Processing Excel XLSX Spreadsheet Tables into TX Text Control using .NET C#](https://www.textcontrol.com/blog/2024/10/16/loading-and-processing-excel-spreadsheet-tables-into-tx-text-control-using-net-csharp/llms.txt)