Home >Web Front-end >CSS Tutorial >How to Set Max-Width for Table Cells Using Percentages?

How to Set Max-Width for Table Cells Using Percentages?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-13 01:58:02649browse

How to Set Max-Width for Table Cells Using Percentages?

Setting Max-Width for Table Cells with Percentages

Setting a max-width constraint using percentages for table cells can be tricky. Consider the following example:

<table>
  <tr>
    <td>Test</td>
    <td>A long string blah blah blah</td>
  </tr>
</table>

<style>
  td {
    max-width: 67%;
  }
</style>

In this case, the max-width setting does not take effect. So, how can we achieve this using percentages?

The Solution

The solution involves utilizing the table-layout property on the table element. By setting it to fixed, we can resize the table cells proportionally:

table {
  width: 100%;
  table-layout: fixed;
}

This CSS rule ensures the table width takes up the entire available space, and the table cells adjust their width accordingly. The percentage max-width settings for individual cells will now be honored.

Example:

<table>

By adding table-layout: fixed, the max-width limitation for the second table cell is effectively applied, reducing its width relative to the parent table.

The above is the detailed content of How to Set Max-Width for Table Cells Using Percentages?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn