← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 18 of 26

HTML Table Sizes

A table with no explicit sizing rules shrinks and grows to exactly fit its content, which can leave a two-column table looking cramped and lopsided next to a wide page. Table sizing properties let you control the overall table width, individual column widths, and row heights, so your data is laid out predictably rather than left entirely to the browser's automatic content-fitting behavior.

In this page:

  1. Setting Overall Table Width
  2. Sizing Individual Columns
  3. Setting Row Height
  4. The table-layout Property
  5. Responsive Table Sizing

Setting Overall Table Width

By default, a table shrinks to only as wide as its content requires. Setting width: 100% on the table element makes it stretch to fill the full width of its containing element instead, which is the most common table width setting on modern responsive pages.

Note: width: 100% combined with a max-width on the table's container is a reliable way to keep tables from becoming too wide on very large screens.

Warning: A table with many columns set to width: 100% can still make individual cells feel cramped if the page itself is narrow.

Example: Setting Overall Table Width

markup 
<table style="width: 100%;">
  <tr><td>Full width table</td></tr>
</table>

Sizing Individual Columns

Setting a width value on a cell in the table's first row is the standard technique browsers use to size an entire column, since column width is a property of the whole column, not just one cell -- values on later rows for the same column are typically ignored.

Note: Set explicit widths on every column in the header row together so the full set of column proportions is clear at a glance.

Warning: Setting different width values in different rows for what should be the same column produces unpredictable results across browsers.

Example: Sizing Individual Columns

markup 
<table>
  <tr>
    <th style="width: 70%;">Name</th>
    <th style="width: 30%;">Age</th>
  </tr>
</table>

Setting Row Height

height on a <tr> or a cell inside it sets a minimum row height -- the row will grow taller than the specified value if its content needs more space, but it will never shrink below the given height, which is useful for keeping table rows visually consistent even when some cells hold more content than others.

Note: Use a consistent minimum row height across a table's rows to keep the grid looking uniform even when cell content length varies.

Warning: height on a table row is treated as a minimum, not a fixed cap, so a cell with a lot of text will still expand the row taller regardless.

Example: Setting Row Height

markup 
<table>
  <tr style="height: 50px;">
    <td>Tall row</td>
  </tr>
</table>

The table-layout Property

table-layout: auto (the default) makes the browser measure every cell's content across the whole table before finalizing column widths, which can be slow on very large tables. table-layout: fixed instead uses only the first row's widths (or equal division if none are set) immediately, rendering faster and enforcing strict column widths regardless of later content.

Note: Use table-layout: fixed on very large or dynamically-loaded tables to improve rendering performance and lock in predictable column widths.

Warning: With table-layout: fixed, overflowing cell content will not force the column wider -- pair it with overflow and text-overflow rules to handle long text gracefully.

Example: The table-layout Property

markup 
<table style="table-layout: fixed; width: 100%;">
  <tr>
    <td>Fixed width column</td>
  </tr>
</table>

Responsive Table Sizing

A table sized entirely with fixed pixel widths can overflow a narrow mobile screen, forcing awkward horizontal scrolling of the whole page layout. Wrapping the table in a container with overflow-x: auto contains that horizontal scroll to just the table itself, keeping the rest of the page layout intact.

Note: Wrap wide data tables in a div with overflow-x: auto so only the table scrolls horizontally on small screens, not the entire page.

Warning: Without a scrollable wrapper, a table wider than the viewport can force the whole page to scroll sideways, which feels broken on mobile.

Example: Responsive Table Sizing

markup 
<div style="overflow-x: auto;">
  <table style="width: 800px;">
    <tr><td>Wide content</td></tr>
  </table>
</div>
Common Mistakes
  1. Setting width on every td in a column and being confused when the values conflict, when only the first row's width values are actually used to size a column in most browsers.
  2. Using width: 100% on a table without table-layout: fixed, so the browser still measures every cell's content before finalizing column widths.
  3. Setting a fixed width narrower than a column's content actually needs, causing awkward text wrapping or overflow.
Chapter Summary
  • width: 100% on a table makes it stretch to fill its container instead of shrinking to fit its content.
  • Setting width on cells in the first row is the standard way to control individual column widths.
  • table-layout: fixed speeds up rendering and enforces column widths strictly, ignoring later cell content sizes.
Browser Support

Table width, column sizing, and table-layout have been supported in every browser since the earliest CSS implementations.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Table Borders Next Lesson → HTML Table Headers

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.