CODEWITHSUNDEEP
htmlcss
Kiss Gergő
Kiss Gergő

Reputation: 89

Equal height and width of each table cell regardless of content

I have an html table that I set the width and height to a given size. I'd like all cells in the table to be the same height and width filling up the table regardless of what's in them(even if empty) and how many cells there are. I'd like a purely CSS solution(no JS) to this problem if possible.

In case anyone is wondering, I'm using JS to change how many cells there are in the table and I'd like the table to be same size no matter the cell count.

Upvotes: 1

Views: 2287

Answers (1)

Nathan Champion
Nathan Champion

Reputation: 1312

It's possible but you'd have to worry about content being clipped because it overflows to the next cell.

The important pieces are:

table-layout: fixed

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

However

If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells.

white-space: nowrap

Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.

overflow: hidden

Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container.

Example:

table{
    /* Set the table width, can be a percentage or size */
    width: 100%;
    
    /* If no widths are present on the first row, the column widths are divided equally across the table */
    table-layout: fixed;
    
    /* Table border */
    border: 1px solid black;
    
    /* A margin to separate the tables */
    margin-bottom: 20px;
    
    /* Set the fixed table height */
    height: 200px;
}

tr{ 
  /* Keep the cells from wrapping content to a new line. */
  white-space: nowrap;
}

td{
  /* Cell border */
  border: 1px solid black;
  
  /* Hide anything in the row that overflows the cell otherwise content could cross cell borders */
  overflow: hidden;
}
<table>
  <thead>
    <tr>
      <td>Column 1     ddddddddddddddddddd</td>
      <td>Column 2</td>
      <td>Column 3</td>
      <td>Column 4</td>
      <td>Column 5</td>
      <td>Column 6</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1 ooooooooooooooooooooooooooooooooooooooo</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4 bbbbbbbbbbbbbbbbbbb</td>
      <td>Cell 5</td>
      <td>Cell 6 ggggggggggg</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4 asdasdasdadsadsdasadsadsadsdas</td>
      <td>Cell 5</td>
      <td>Cell 6 jkasddsakjakjlasdjkladslkjalkjadsklajds</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
      <td>Column 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </tbody>
</table>

<table>
</table>

Upvotes: 1

Related Questions