/ / Kolor tła w obróconej komórce tekstowej nieprawidłowy rozmiar - html, css, rotation, html-table

Kolor tła w obróconej komórce tekstowej nieprawidłowy rozmiar - html, css, rotation, html-table

Obróciłem tekst w komórce tabeli, ale kolor tła nie wypełnia komórki. Mam wyszukiwanie StackOverflow i próbowałem prawie wszystkie odpowiedzi I mógł znaleźć bezskutecznie. Oto JSFiddle: https://jsfiddle.net/eoar08fx/

HTML:

<td rowspan="4">
<div class="vertical-text">Activities</div>
</td>

CSS:

.vertical-text {
color: #FFFFFF;
background-color: #2E9AFE;

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);

/* accepts left, right, top, bottom */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;

/* do not set in IE9+? */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 3);
}

Dzięki za wszelkie wskazówki lub punkty.

Odpowiedzi:

0 dla odpowiedzi № 1

ustawiłeś tło na div w komórce, a nie w komórce, należy zastosować kolor tła do td i obróć tekst wewnątrz div

<td rowspan="4" class="vertical-text">
<div >Activities</div>
</td>

i

.vertical-text  {
color: #FFFFFF;
background-color: #2E9AFE;
}
.vertical-text div {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);

/* accepts left, right, top, bottom */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;

/* do not set in IE9+? */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 3);
}

https://jsfiddle.net/grassog/51mhy9qe/1/


0 dla odpowiedzi nr 2

Spróbuj zastosować cell-blue Właściwość klasy CSS, którą utworzyłeś td conatining the div który zawiera sam tekst.

Powinno wypełnić td zamiast tylko wypełniać div.


0 dla odpowiedzi № 3

Prostą odpowiedzią jest ustawienie tła komórki za pomocą klasy, której używasz w innym miejscu.


Dla szerokości 2 opcje poniżej


Możesz także użyć właściwości trybu pisania (w tym celu była to funkcja IE 5). Można by uniknąć zajmowania się szerokością tej komórki.

https://developer.mozilla.org/fr/docs/Web/CSS/writing-mode

https://msdn.microsoft.com/library/ms531187%28v=vs.85%29.aspx

.vertical-text {
margin:0 0 0 1em;
line-height:0.5em;
max-height:4em;
font-size: 2em;
color: #FFFFFF;
text-align:center;
-webkit-writing-mode:vertical-lr;/* old windows safari */
writing-mode:vertical-lr;
writing-mode:tb-lr;
direction:ltr;
transform:scale(-1,-1);/* orientation can be reversed */

}
.cell-blue {
color: #FFFFFF;
background-color: #2E9AFE;
}

.cell-grey {
color: #DEF0F6;
background-color: #D8D8D8;
}

td.wide-cell {
font-family: Arial;
text-align: center;
vertical-align: middle;
height: 45px;
width: 300px;
}

td.short-cell {
font-family: Arial;
text-align: center;
vertical-align: middle;
height: 45px;
width: 70px;
}

.centered-cell {
font-family: Arial;
text-align: center;
vertical-align: middle;
height: 60px;
width: 70px;
}
<table border="1" cellpadding="0" cellspacing="0" style="margin-left:30px; text-align:center; vertical-align:middle;">
<tr>
<td colspan="2" class="wide-cell cell-blue">
DATE
</td>
<td class="short-cell cell-blue">
YTD
</td>
<td class="short-cell cell-blue">
Q1
</td>
<td class="short-cell cell-blue">
Q2
</td>
<td class="short-cell cell-blue">
Q3
</td>
<td class="short-cell cell-blue">
Q4
</td>
</tr>

<tr>
<td rowspan="4" class="cell-blue"><!-- it deserves the cell-blue class doesn"t it ? */
<div class="vertical-text">Activities</div>
</td>
<td class="left-cell cell-blue">
Setup Y/N
</td>
<td class="centered-cell cell-grey">
<div id="setupYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="setupQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="setupQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="setupQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="setupQ4"></div>
</td>
</tr>
<tr>
<td class="left-cell cell-blue">
Objectives
</td>
<td class="centered-cell cell-grey">
<div id="objYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ4"></div>
</td>
</tr>
<tr>
<td class="left-cell cell-blue">
Project
</td>
<td class="centered-cell cell-grey">
<div id="assessmentYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ4"></div>
</td>
</tr>
<tr>
<td class="left-cell cell-blue">
Outcome
</td>
<td class="centered-cell cell-grey">
<div id="outcomeYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ4"></div>
</td>
</tr>
</table>
wersja demonstracyjna codepen


Lub użyj ujemnego marginesu i pseudo, aby upewnić się, że ma wymaganą wysokość:

[rowspan] {/*whatever selector you want to use ,  vertical-text class could be set onto the cell to make things easier :) */
min-width:1em;
vertical-align:bottom;/* decide to start from bottom or top to not mind text length */

}
.vertical-text {
font-size: 2em;
line-height:1.5em;
color: #FFFFFF;
float:left;
margin-right:-999px;/* reduce width virtually to very little */
transform:rotate(-90deg) translate(-50%,0);/* rotate and replace */
transform-origin:top left;
}
.vertical-text:before{/* here we go look for the height the text is suppose to use */
content:"";
float:left;
padding-top:100%;/* might be increased a little */
}

/* regular stuff */
.cell-blue {
color: #FFFFFF;
background-color: #2E9AFE;
}

.cell-grey {
color: #DEF0F6;
background-color: #D8D8D8;
}

td.wide-cell {
font-family: Arial;
text-align: center;
vertical-align: middle;
height: 45px;
width: 300px;
}

td.short-cell {
font-family: Arial;
text-align: center;
vertical-align: middle;
height: 45px;
width: 70px;
}

.centered-cell {
font-family: Arial;
text-align: center;
vertical-align: middle;
height: 60px;
width: 70px;
}
<table border="1" cellpadding="0" cellspacing="0" style="margin-left:30px; text-align:center; vertical-align:middle;">
<tr>
<td colspan="2" class="wide-cell cell-blue">
DATE
</td>
<td class="short-cell cell-blue">
YTD
</td>
<td class="short-cell cell-blue">
Q1
</td>
<td class="short-cell cell-blue">
Q2
</td>
<td class="short-cell cell-blue">
Q3
</td>
<td class="short-cell cell-blue">
Q4
</td>
</tr>

<tr>
<td rowspan="4" class="cell-blue">
<div class="vertical-text">Activities</div>
</td>
<td class="left-cell cell-blue">
Setup Y/N
</td>
<td class="centered-cell cell-grey">
<div id="setupYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="setupQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="setupQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="setupQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="setupQ4"></div>
</td>
</tr>
<tr>
<td class="left-cell cell-blue">
Objectives
</td>
<td class="centered-cell cell-grey">
<div id="objYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="objQ4"></div>
</td>
</tr>
<tr>
<td class="left-cell cell-blue">
Project
</td>
<td class="centered-cell cell-grey">
<div id="assessmentYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="assessmentQ4"></div>
</td>
</tr>
<tr>
<td class="left-cell cell-blue">
Outcome
</td>
<td class="centered-cell cell-grey">
<div id="outcomeYTD"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ1"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ2"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ3"></div>
</td>
<td class="centered-cell cell-grey">
<div id="outcomeQ4"></div>
</td>
</tr>
</table>

wersja demonstracyjna codepen