Technology Computer Programming Web Development

How can I make all cells in an HTML table have equal height and width under all conditions, such as mobile and desktop views?

3 Answers
3 answers

How can I make all cells in an HTML table have equal height and width under all conditions, such as mobile and desktop views?

3
This can be done by giving some fixed widths to table data cells and using absolute position on content.

Here is the CSS:

table {
  width: 90%;
}
td {
  width: 33.33%;
  position: relative;
}
td:after {
  content: '';
  display: block;
  margin-top: 100%;
}
td .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: gold;
}

Here is the HTML:


<table>
  <tr>
    <td><div class="content">1</div></td>
    <td><div class="content">2</div></td>
    <td><div class="content">3</div></td>
  </tr>
  <tr>
    <td><div class="content">4</div></td>
    <td><div class="content">5</div></td>
    <td><div class="content">6</div></td>
  </tr>
  <tr>
    <td><div class="content">7</div></td>
    <td><div class="content">8</div></td>
    <td><div class="content">9</div></td>
  </tr>
<table>

Wrote answer · 11/11/2021
Karma · 1435
1

Enter your code here

Wrote answer · 11/12/2021
Karma · 20
0

To ensure all cells in an HTML table have equal height and width under all conditions, including mobile and desktop views, you can use a combination of CSS techniques. Here's a breakdown of how to achieve this:

1. Using Fixed Table Layout:

  • Set the table-layout property to fixed. This makes the table layout more predictable.

  • Define explicit widths for the columns.

Example: 


 <table >
  <colgroup>
   <col >
   <col >
   <col >
   <col >
  </colgroup>
  <thead>
   <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
   </tr>
   <tr>
    <td>Cell 5</td>
    <td>Cell 6</td>
    <td>Cell 7</td>
    <td>Cell 8</td>
   </tr>
  </tbody>
 </table>

  • In this example, table-layout: fixed; ensures the table respects the specified widths. The <colgroup> section defines the width for each column as 25% of the table width. Adjust the percentage to fit your needs.

2. Ensuring Equal Height:

  • Apply display: flex to the table rows.

  • Use height: 100% on the table cells.

Example: 


 <table >
  <colgroup>
   <col >
   <col >
   <col >
   <col >
  </colgroup>
  <tbody>
   <tr >
    <td >Cell 1</td>
    <td >Cell 2</td>
    <td >Cell 3</td>
    <td >Cell 4</td>
   </tr>
   <tr >
    <td >Cell 5</td>
    <td >Cell 6</td>
    <td >Cell 7</td>
    <td >Cell 8</td>
   </tr>
  </tbody>
 </table>

  • Applying display: flex; to the <tr> elements makes them behave like flex containers, and setting height: 100%; on the <td> elements ensures that all cells in the same row have equal height.

3. Responsive Adjustments Using Media Queries:

  • Use CSS media queries to adjust the table layout for different screen sizes. For example, you might change the column widths or stack the table cells vertically on smaller screens.

Example: 


 <style>
  table {
   table-layout: fixed;
   width: 100%;
   border-collapse: collapse;
  }
  colgroup col {
   width: 25%;
  }
  tr {
   display: flex;
  }
  td {
   height: 100%;
   border: 1px solid black;
  }
  /*  Media query for mobile devices  */
  @media (max-width: 768px) {
   colgroup col {
    width: 100%; /*  Each column takes full width on mobile  */
   }
   tr {
    flex-direction: column; /*  Stack cells vertically  */
   }
   td {
    width: 100%; /*  Each cell takes full width  */
    height: auto; /*  Allow height to adjust to content  */
   }
  }
 </style>
 <table>
  <colgroup>
   <col>
   <col>
   <col>
   <col>
  </colgroup>
  <tbody>
   <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
   </tr>
   <tr>
    <td>Cell 5</td>
    <td>Cell 6</td>
    &
Wrote answer · 3/14/2025
Karma · 40

Related Questions