Equal Width Table Cells with CSS
Question:
How can we make an indeterminate number of table-cell elements within a table container have equal widths, regardless of their content size?
Answer:
Yes, it's possible to achieve this using pure CSS.
<code class="css">div {
display: table;
width: 250px;
table-layout: fixed;
}
div > div {
display: table-cell;
width: 2%; /* or 100% according to OP comment */
}</code>
Copy after login
Here's how it works:
- Set table-layout: fixed; on the parent div container. This activates a table layout algorithm where the table tries to maintain specified dimensions.
- Assign a width to each div (table-cell). In this example, we've set it to 2%, but you can adjust it according to your requirements.
- This width triggers the fixed table layout behavior, and the browser will allocate widths equally to each cell, ensuring they have equal widths regardless of their content size.
Additional Notes:
- This solution is compatible with Chrome and IE8 .
- Be aware that Safari 6 on macOS has a different interpretation of table-layout: fixed;. This could lead to different results in that browser.
- You can set a fixed width to the parent div (table) to control the overall width of the table. If you don't specify a width, it will default to 100%.
The above is the detailed content of How to Make Table Cells Equal Width Using CSS?. For more information, please follow other related articles on the PHP Chinese website!