I am using tabular data in a table and some information with 90 degrees (standing) in cells. But the css does not behave as expected and leaves large spaces as if the text were normal horizontally. Does anyone know of any properties that will fix this?
Follow here to see how it looks. I just put:
p {
-webkit-transform: rotate(-90deg);
white-space: nowrap;
}
The way is to force the width in the marra. Add:
width: 20px;
To paragraph.
Note that this causes the text to go up somewhat. To correct, you must add a margin above. I got a good margin for your specific case with 170 pixels ... Other cases may need other measures. Try also with non-fixed measurements later, as this will have something more reusable. The full CSS of the paragraph looks something like this:
p {
-webkit-transform: rotate(-90deg);
white-space: nowrap;
width: 20px;
margin-top: 170px;
}
Part of the blame can be from the default setting of the Display property to P elements.
Try the following:
p {
-webkit-transform: rotate(-90deg);
white-space: nowrap;
display:inline-block;
}
A demo fiddle can be viewed here.
