Several weeks ago I posted a query (Table overflows parent div when td content is too wide) related to table design. The response I received seemed to resolve the issue perfectly. Now, as I attempted to redesign the table yesterday, I encountered a challenge in adjusting the width of a td element.
My requirements are:
- I need the header to remain unwrapped and not show overflow. This was addressed by the previous solution.
- Additonally, I want the yellow td cell to occupy 20% width instead of the fixed 50%.
To date, I've yet to find a solution where both issues are resolved simultaneously. Visit this jsFiddle, toggle comments to observe both dilemmas:
table {
width: 90%;
border: 1px solid black;
/*table-layout:fixed;*/ 1. Problem (Header wraps)
table-layout:fixed; 2. Problem (td-width != 20%)
}
.header {
overflow:hidden;
/*white-space: nowrap;*/ 1. Problem (Header wraps)
white-space: nowrap; 2. Problem (td-width != 20%)
}
Is there a way to solve these two challenges concurrently?