How to set table column width with CSS?

Spread the love

Sometimes, we want to set table column width with CSS.

In this article, we’ll look at how to set table column width with CSS.

How to set table column width with CSS?

To set table column width with CSS, we set the width property.

For instance, we write

<table>
  <thead>
    <tr>
      <th class="from">From</th>
      <th class="subject">Subject</th>
      <th class="date">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[from]</td>
      <td>[subject]</td>
      <td>[date]</td>
    </tr>
  </tbody>
</table>

to add a table.

Then we write

table {
  width: 100%;
  border: 1px solid #000;
}
th.from,
th.date {
  width: 15%;
}
th.subject {
  width: 70%;
}

to set the width of each column with the width property.

Conclusion

To set table column width with CSS, we set the width property.

Leave a Reply

Your email address will not be published.