Rotate CSS3 and Tables

Asked

Viewed 83 times

2

I am using tabular data in a table and some information with 90 degrees (standing) in the cells. However css does not behave as expected and leaves large spaces as if the text is normal horizontally. Does anyone know of any property that can solve this?

Following link here to see how it turned out. I just put :

 p {
            -webkit-transform: rotate(-90deg);
            white-space: nowrap;
        }
css3
  • 1

    I think it would help a lot if you showed the relevant CSS code snippet and the current result, dsantoro.

2 answers

1


The way is to force the width in the box. Add:

width: 20px;

To the paragraph.

Note that this causes the text to rise somewhat. To correct, you need to add a margin above. I got a good margin for your specific case with 170 pixels... Other cases may need other measures. Also try it with non-fixed measurements later, as you’ll have something more reusable. The full paragraph CSS looks something like this:

p {
    -webkit-transform: rotate(-90deg);
    white-space: nowrap;
    width: 20px;
    margin-top: 170px;
}
  • 1

    Oops. That helped a lot ein. Tamo almost there. I found something about this, this "Ssue". Follow link http://www.benknowscode.com/2014/01/css-rotated-text-parent-dimensions-and-spacing-issues.html

  • Thanks for the link! I don’t usually use rotations, but it aroused my curiosity!

  • I don’t usually wear it either but sometimes work makes us.

0

Part of the fault may be the default property definition Display for elements P.

Try the following:

 p {
    -webkit-transform: rotate(-90deg);
    white-space: nowrap;
    display:inline-block;
    }

A Fiddle of demonstration can be viewed here.

inserir a descrição da imagem aqui

  • Fizzdle is not opening rs. But it didn’t solve. I don’t know if it’s something in the table or p. I don’t think the CSS is prepared for this.

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.