Can Equal Width Table Cells Be Achieved with Pure CSS for an Indeterminate Number of Cells?

Susan Sarandon
Release: 2024-11-08 15:03:01
Original
428 people have browsed it

Can Equal Width Table Cells Be Achieved with Pure CSS for an Indeterminate Number of Cells?

Equal Width Table Cells with Indeterminate Number of Cells

In a scenario where a table contains an unpredictable number of table-cell elements, can pure CSS be utilized to establish equal widths for these cells regardless of varying content sizes?

Answer:

Yes, it is possible using the following CSS declarations:

<code class="css">div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%; /* or 100% if preferred */
}</code>
Copy after login

This solution introduces table-layout: fixed;, which, in combination with a specified width for each cell (2% in this example), triggers a specific table algorithm that strives to respect the designated dimensions. Keep in mind that Safari 6 on OS X may exhibit different results due to its non-standard implementation of table-layout: fixed;.

The above is the detailed content of Can Equal Width Table Cells Be Achieved with Pure CSS for an Indeterminate Number of Cells?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template