Заполните все повернуть <th> с цветом фона

Это тот, с которым я никогда не сталкивался, и не вижу ответов на переполнение стека или где-либо еще. Вот screencapped отрывок из диаграммы сравнения я создаю:Заполните все повернуть <th> с цветом фона

В соответствии с требованиями каркасов, то <th> текста поворачиваются на 270 градусов, что также требует «зебры-чередование» всех четных столбцов с серым фоном. <td> s заполняет область фона отлично, но повернутые <th> s заполняют только фон за текстом. Я применил высоту 100%, как это было предложено другими, без поворота th примерами, безрезультатно, и попытка добавить ширину 100% исключает всю таблицу. Должно быть простое решение этого, которого я иначе не могу найти. Большое спасибо за любые рекомендации, которые вы можете предоставить.

Update: Хотя я думал, что при условии достаточного CSS, чтобы объяснить мою проблему, в соответствии с просьбой, вот соответствующие стили быть применены здесь для этого вращают th:

th.headertext { 
    -ms-transform: rotate(270deg); 
    -webkit-transform: rotate(270deg); 
    transform: rotate(270deg); 
    text-align: left; 
    bottom: 56px; 
    position: relative; 
} 

td:nth-child(even), th:nth-child(even) { 
    background-color: #efefef; 
} 

th { 
    font-size: 16px; 
    font-weight: bold; 
    height: 100%; 
    line-height: 100%; 
} 

td, th { 
    text-align: center; 
    border-bottom: solid 1px #ccc; 
    font-size: 12px; 
    padding: 6px; 
    word-wrap: break-word; 
}

источник

2017-02-08 jimiayler

Дайте нам свой код, и мы постараемся дать вам некоторые ответы :) – andreas

То, что вы хотите сделать, это дать повернутым заголовкам в 'линейка height', равные их ширину' ', либо используя' CSS', либо «на лету», с 'javascript'. Если вы не хотите, чтобы макет таблицы был затронут, вы, вероятно, захотите использовать «абсолютное» позиционирование. Нет никакого * чистого * способа сделать это. Это будет взломано в любом случае, и это не гарантирует работу кросс-браузера. Я предлагаю вам приклеить стул к потолку и пригласить дизайнера страницы и попросить их * сесть *? –

@AndreiGheorghiu Приклеивание кресла к потолку - изящное решение, но я увижу, есть ли у кого-нибудь еще одно решение. :) – jimiayler

Вы пытаетесь повернуть сами th? Плохая идея. Сам размер th будет таким же широким, как и их необработанная высота.
Итак, одно решение, но только если вы знаете, что td все имеют одинаковую ширину, это дать th с этой высотой.

Лучшим решением является поместить некоторые div в th s и повернуть их. Тогда вы не зависите от того, что все ячейки имеют одинаковую ширину.

table { 
 
    border-spacing: 0; 
 
    border-top:1px solid #ccc; 
 
} 
 

 
th.headertext div { 
 
    -ms-transform: rotate(270deg); 
 
    -moz-transform: rotate(270deg); 
 
    -webkit-transform: rotate(270deg); 
 
    transform: rotate(270deg); 
 
    line-height:4em; 
 
} 
 

 
td:nth-child(even), th:nth-child(even) { 
 
    background-color: #efefef; 
 
} 
 

 
th { 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    /*height: 100%;*/ 
 
    /*line-height: 100%;*/ 
 
} 
 

 
td, th { 
 
    text-align: center; 
 
    border-bottom: solid 1px #ccc; 
 
    font-size: 12px; 
 
    padding: 6px; 
 
    word-wrap: break-word; 
 
}

<table> 
 
    <tr> 
 
    <th class="headertext"><div>left</div></th> 
 
    <th class="headertext"><div>middle</div></th> 
 
    <th class="headertext"><div>right</div></th> 
 
    </tr> 
 
    <tr> 
 
    <td>left</td> 
 
    <td>middle</td> 
 
    <td>right</td> 
 
    </tr> 
 
</table>

источник

2017-02-08 17:49:50

Перемещение содержимого в повернутом ребенке и уход из фона в родителе, похоже, делают трюк. Твердое мышление. –

Поскольку в ассоциированных 'td's изображениях одинакового размера даны точная высота после перемещения текста в' div ', трюк. Большое спасибо. – jimiayler

-1

сделать как это, Заменить " изображение»с изображениями,

<html> 
 
<head> 
 
<style> 
 
th:nth-child(2n+1) span { 
 
    background: #E4E4E4; 
 
} 
 
th{ 
 
    -webkit-transform: rotate(270deg); 
 
    
 
\t height: 50px; 
 
\t 
 
} 
 

 
td:nth-child(2n+1) { 
 
    background: #E4E4E4; 
 
} 
 
td { 
 
    width: 50px; 
 
    height: 50px; 
 
\t border-top:solid 1px #acacac; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<table cellpadding="0" cellspacing="0"> 
 
<tr> 
 
<th><span>Brush</span></th><th><span>Roll</span></th><th><span>Spray</span></th><th><span>Liquid</span></th> 
 
</tr> 
 
<tr> 
 
<td>Image</td><td>Image</td><td>Image</td><td>Image</td> 
 
</tr> 
 
<tr> 
 
<td>Image</td><td>Image</td><td>Image</td><td>Image</td> 
 
</tr> 
 
</table> 
 
</body> 
 
</html>

источник

2017-02-08 17:35:38

s _are_ только изображения, а фрагмент кода демонстрирует ту же проблему, что и в моем скринкапе выше. Трудно понять, почему кто-то проголосует за этот ответ, так как он не работает. – jimiayler

Mohammad, если вы попросите своих друзей проголосовать за вас, они должны, по крайней мере, проголосовать за ответы, которые на самом деле работают ... –

Заполните все повернуть <th> с цветом фона

ответ

Смежные вопросы