HTML Table Sizes
Controlling the size of a table and its cells makes your data readable and your page layout consistent. This topic covers how to set the width, height, and padding of tables, rows, and cells using both HTML attributes and CSS properties.
Default Table Size Behavior
By default, a table is only as wide as its content. If one cell has a long word and another has a short word, each column stretches to fit its content automatically. The table takes no more space than it needs.
Visual Diagram — Default vs Set Width
Default (fits content): +------+----+ | Name | ID | +------+----+ | Alice| 1 | +------+----+ Width set to 100%: +-------------------+-------------------+ | Name | ID | +-------------------+-------------------+ | Alice | 1 | +-------------------+-------------------+ Table stretches to fill its container
Setting Table Width
CSS Width Property
The recommended approach is CSS. Apply the width property to the <table> element.
<style>
table {
width: 100%; /* fills the full container */
border-collapse: collapse;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Alice</td>
<td>90</td>
</tr>
</table>
You can also set a fixed pixel width:
table { width: 600px; } /* always 600 pixels wide */
table { width: 80%; } /* 80% of its parent element */
table { max-width: 800px; } /* grows up to 800px but no wider */
Setting Column Width
By default the browser decides column widths. You control them by setting width on header or data cells.
Fixed Column Width
<style>
th:first-child, td:first-child { width: 200px; }
th:last-child, td:last-child { width: 100px; }
</style>
Percentage-Based Column Width
<style>
th:nth-child(1) { width: 50%; } /* first column: half the table */
th:nth-child(2) { width: 30%; } /* second column: 30% */
th:nth-child(3) { width: 20%; } /* third column: 20% */
</style>
Visual Diagram — Percentage Columns
Total table width = 100% +-------------------+----------+--------+ | Name (50%) | City(30%)| ID(20%)| +-------------------+----------+--------+ | Alice | Delhi | 001 | +-------------------+----------+--------+
The table-layout Property
The CSS table-layout property controls how the browser calculates column widths.
auto — The default. The browser reads all cell content first, then decides widths. Long content pushes columns wider.
fixed — The browser uses only the first row to determine widths and ignores the content of other rows. This makes tables render faster and respect your set widths more reliably.
table {
table-layout: fixed;
width: 100%;
}
Use table-layout: fixed when you want precise column widths and your table has many rows.
Setting Row Height
Row height expands automatically to fit the tallest cell in that row. You set a minimum height using CSS on the <tr> or <td> element.
tr { height: 50px; } /* every row is at least 50 pixels tall */
Visual Diagram — Row Height
Without height set: +--------+------+ | Name | Age | (row height fits text) +--------+------+ With height: 60px: +--------+------+ | | | | Name | Age | (row is taller, text stays at top by default) | | | +--------+------+
Cell Padding
Cell padding is the space between the text inside a cell and the cell border. Without padding, text sits right against the border and looks cramped.
Visual Diagram — Padding
Without padding: +--------+ |Alice | (text touches border) +--------+ With padding: 10px: +----------+ | | | Alice | (text has breathing room on all sides) | | +----------+
<style>
td, th {
padding: 10px; /* 10px on all four sides */
padding: 8px 16px; /* 8px top/bottom, 16px left/right */
padding-top: 5px; /* only top */
padding-left: 20px; /* only left */
}
</style>
Cell Spacing
Cell spacing controls the gap between cells themselves — outside the cell borders. In modern CSS, you manage this with border-spacing when using border-collapse: separate.
table {
border-collapse: separate;
border-spacing: 10px; /* 10px gap between every cell */
}
When border-collapse: collapse is set, border-spacing has no effect — cells share their borders with no gap.
Setting Cell Width Individually
Individual cells can have their own width. The widest cell in a column determines the entire column width.
<table style="width:600px;">
<tr>
<th style="width:300px;">Product Name</th>
<th style="width:150px;">Price</th>
<th style="width:150px;">Stock</th>
</tr>
</table>
Minimum and Maximum Width
Use min-width and max-width on columns to keep them within a size range while still adapting to screen size.
td {
min-width: 100px; /* column never collapses below 100px */
max-width: 300px; /* column never grows beyond 300px */
overflow: hidden; /* hides content that overflows the max-width */
}
Overflow in Fixed-Width Tables
When text is longer than the cell width, the cell overflows by default. Control overflow with the overflow and text-overflow CSS properties.
td {
width: 150px;
overflow: hidden;
text-overflow: ellipsis; /* shows "..." when text is cut off */
white-space: nowrap; /* prevents text from wrapping to next line */
}
Visual Diagram — Text Overflow
Without overflow handling: +--------+ |This is a very long name that| ← cell breaks layout +--------+ With overflow: hidden + text-overflow: ellipsis: +-------------+ |This is a ve…| ← text is cut and shows three dots +-------------+
Responsive Table Width
On mobile screens, wide tables can overflow the page and force users to scroll horizontally. Wrap your table in a <div> with overflow-x: auto so the table scrolls horizontally inside its container rather than breaking the page layout.
<div style="overflow-x: auto;">
<table>
...
</table>
</div>
This technique keeps your table design intact on desktop while giving mobile users a scrollable view of the full table.
Complete Size Example
<style>
.data-table {
width: 100%;
max-width: 800px;
border-collapse: collapse;
table-layout: fixed;
}
.data-table th,
.data-table td {
padding: 12px 16px;
border: 1px solid #ddd;
text-align: left;
}
.data-table th:nth-child(1) { width: 40%; }
.data-table th:nth-child(2) { width: 30%; }
.data-table th:nth-child(3) { width: 30%; }
</style>
<table class="data-table">
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Priya Sharma</td>
<td>Mathematics</td>
<td>92</td>
</tr>
</table>
Combining table-layout: fixed, percentage widths, and consistent padding gives you a clean, predictable table that looks good on any screen.