Столы для укладки - таблица-макет: фиксированная vs td-width: 20%

Question

Около месяца назад я задал вопрос (Table overflows parent div when td content is too wide) относительно таблиц. Я получил ответ, который, казалось, работал отлично. Вчера я хотел снова создать таблицу, но заметил, что я не могу изменить ширину td.

Что я хочу:

1. Я хочу, чтобы заголовок ни завернуть, ни переполнения, чтобы показать. Ответ от месяца назад решил эту проблему.
2. Я также хочу, чтобы желтый тд был на 20% шириной, а не ровно на 50%.

Я еще не нашел ответ, так как решена первая или вторая проблема, ни одна из них. Вот jsFiddle, просто добавить/удалить комментарии, чтобы увидеть обе проблемы:

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%) 
} 

Как я могу решить обе проблемы сразу?

Answer 1

Ваша проблема в том, что в таблице с фиксированным макетом column width is dictated by the first row.

Вы можете создать 2 фиктивных ячейки в первой строке и переместить заголовок в свою собственную строку. Кроме того, необходимо, чтобы сделать вашу .red пролетного столбца 3 строки для учета этой дополнительной строки:

<div> 
    <table> 
    <tr> 
     <td class="red" rowspan="3">RED</td> 
     <td class="dummy-green"></td> 
     <td class="dummy-yellow"></td> 
    </tr> 
    <tr> 
     <td class="header" colspan="2">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
     TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</td> 
    </tr> 
    <tr> 
     <td class="green">GREEN</td> 
     <td class="yellow">YELLOW</td> 
    </tr> 
    </table> 
</div> 

И сделать ширину манекена-желтого элемент 20%:

.dummy-yellow { 
    width: 20%; 
} 

Оставить и white-space:nowrap где они есть.

Единственная проблема, с которой я вижу этот метод, состоит в том, что он создает над вашим заголовком строку 2px (невидимая).

См demo