Struggling to format a table based on specific requirements with no success:
- Some columns need to adjust width to fit content.
- Other columns should share remaining available width equally.
- Table width must not exceed parent width but still fill it.
I tried setting the width of shrinking columns to 1px, but as expanding column content grows, it causes the table width to exceed the parent's width, breaking the last requirement.
Any suggestions? I'm stuck.
Utilizing Compass/Sass hyphenation for ensuring the table fits within the parent width. It functions perfectly in Chrome, but in Firefox, there is a slight overflow issue. Here are my current styles:
td.id
td.actions {
text-align: right;
/* method to make table cells shrink and wrap content */
white-space: nowrap;
width: 1px;
}
td {
@include hyphenation;
}