How to Set Column Width in HTML Tables

For a small, one-off table, an inline declaration such as <th style="width: 15%">ID</th> is enough. In a reusable component, prefer a stylesheet or a <colgroup> so the rule applies to the whole column, including its data cells:

<style>
.people {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.people th,
.people td {
  border: 1px solid black;
  overflow-wrap: anywhere;
}

.people .id-column { width: 15%; }
.people .name-column { width: 70%; }
.people .age-column { width: 15%; }
</style>
<table class="people">
  <colgroup>
    <col class="id-column">
    <col class="name-column">
    <col class="age-column">
  </colgroup>
  <thead>
    <tr><th scope="col">ID</th><th scope="col">Name</th><th scope="col">Age</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>John</td><td>25</td></tr>
    <tr><td>2</td><td>Jackson</td><td>40</td></tr>
  </tbody>
</table>

The three percentages add up to 100%, so the table has a clear initial allocation: Name is wider than ID and Age. table-layout: fixed makes sizing depend primarily on the table width, explicit column widths, and the first row rather than on the longest cell in every row. overflow-wrap: anywhere allows an unusually long value to wrap instead of forcing the table wider.

The <colgroup> must occur before the table’s row groups. A <col> represents a column, not a visible cell, and it has no content of its own. Use span on a <col> when consecutive columns share one rule. This approach also keeps the HTML semantic: use <th> for headings and scope="col" so assistive technology can associate headings with their cells.

Choose between classes and :nth-child()

You can set widths on the first row with selectors such as .people th:nth-child(1) { width: 15%; }, .people th:nth-child(2) { width: 70%; }, and .people th:nth-child(3) { width: 15%; }. This preserves the original class-based and :nth-child() techniques without adding a class to every header. Classes are clearer when column meaning matters; :nth-child() is convenient for a stable, simple column order.

Do not rely on :nth-child() when rows contain colspan, when header rows have a different structure, or when columns can be reordered. In those cases, <colgroup> or named classes make the intended column mapping explicit. If only some widths are specified, the browser distributes the remaining space; do not assume an unspecified column will always receive an exact percentage under automatic layout.

Handle content that does not fit

Fixed layout does not make a narrow column large enough for every possible value. A long unbroken URL or identifier can overflow if it cannot wrap. The following boundary keeps the width rule but makes the cell scroll horizontally instead of changing the page layout:

<style>
  .compact {
    table-layout: fixed;
    width: 320px;
  }
  .compact th,
  .compact td {
    max-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .compact td.code {
    overflow-x: auto;
    white-space: nowrap;
  }
</style>
<table class="compact">
  <colgroup><col style="width: 25%"><col style="width: 75%"></colgroup>
  <tr><th scope="col">Type</th><th scope="col">Value</th></tr>
  <tr><td>URL</td><td class="code">https://example.com/a-very-long-value-without-spaces</td></tr>
</table>

For ordinary prose, wrapping is usually preferable to horizontal scrolling. Test the table with realistic content and at narrow viewport widths. Widths are hints interpreted by the table layout algorithm, not a guarantee that every cell will remain at an exact pixel size.