Looking to create an HTML table where the columns and rows can be sized independently of the cell content? If a row or column isn't large enough to display all the content, it should simply overflow behind the cell. A solution was found that worked in some browsers but not all:
th, td {
position: relative;
overflow: hidden;
}
td > span {
position: absolute;
top: 0px;
}
th > div {
position: relative;
}
This approach works well in Chrome, Opera, Safari, and IE, but Firefox doesn't seem to cooperate. In Firefox, the relative positioning is ignored for cells (td's), causing issues with content placement. The problem arises because Firefox does not support position:relative on table cells - a known issue.
Various workarounds were attempted, such as using position:static on table cells or adjusting table layout properties. These solutions had mixed results and behavior inconsistencies across different browsers. Implementing these fixes may not be perfect, but they offer potential alternatives for those facing similar challenges.