HTML Table Column Width

To specify width to a column, set the CSS width property of column heading th or any of the cell td in the respective column.

Refer CSS width property tutorial to know about valid width values and examples.

By default, the content decides the width of the table. If the content is larger than the width of its parent, then the content is wrapped in more than one line.

Examples

Column Width of 200px

In the following example, we specify a width of 200px for the first column. We have provided the width as inline-css.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      table, th, td {
        border: 1px solid red;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <th style="width:200px">Name</th>
        <th>Quantity</th>
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>18</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Column Width of 10em

In the following example, we specify a width of 10em for the first column, and a width of 7em for the second column. We have provided the width as inline-css.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      table, th, td {
        border: 1px solid red;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <th style="width:10em">Name</th>
        <th style="width:7em">Quantity</th>
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>18</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Column Width via Cell (td)

Not only using th, but we can also set the column width by specifying width for any cell (td tag) in that column.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      table, th, td {
        border: 1px solid red;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <th>Name</th>
        <th>Quantity</th>
      </thead>
      <tbody>
        <tr>
          <td style="width:200px">Apple</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>18</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Conclusion

In this HTML Tutorial, we learned how to set a specific width for column of HTML table, with examples.

TutorialKart

HTML Table Column Width