Equal height and width of each table cell regardless of content - html

Question

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.

Answer 1

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>