Margins / Padding on Rotated Text in Table Cells

I have a table with rotated text in the headings. I borrowed CSS from elsewhere and revised for a rotation of 90 degrees instead of -90 degrees. There is a wide space before (ie above) each column of rotated text. I'd like to get rid of it, and nothing I've tried works.

There is a lot of HTML and a fair amount of CSS, so I've put the whole thing in a fiddle: http://jsfiddle.net/SLkfR/.

One line of the rotated text looks like this: <td><div class="vertical-text"><div class="vertical-text-inner">InvA</div></div></td>

The CSS looks like:

body {font-family: Verdana, Arial, Helvetica, sans-serif;}
table {text-align: center; vertical-align: middle;}
table.uprog {border: 1px solid gray; border-collapse: collapse;  table-layout: fixed;}
table.uprog th {vertical-align: top;  border-right: 1px solid gray;}
.uprog td {text-align: center; vertical-align: middle; border: 1px solid gray; }
.uprog td.mal {text-align: left; vertical-align: middle;}
.uprog th {text-align: center; font-weight: bold;}
.vertical-text {
    font-size: 80%;
    display: inline-block;
    overflow: hidden;
    width: 1.2em;
    line-height: 4em;
}
.vertical-text-inner {
    white-space: nowrap;
    transform:  rotate(90deg);
}

I know the vertical text is in a TD with vertical-align: middle; Changing that to top doesn't make any difference.

The rotation doesn't work at all in Chrome because I haven't put in the necessary -webkit stuff. The fiddle does work (except for the extra space that I want to get rid of) in FF and IE. I don't have enough reputation to post multiple links; there's a credit for the borrowed CSS as a comment in the fiddle.

---

After a substantial amount of messing around, I've realized that, although the text is rotated, top, left, etc. on the DIV itself are oriented just like always, according to the CSS box model. So, a negative top margin on the DIV moves the rotated text upward. The vertical-align: middle; of the table-data tag aligns the entire box formed by the DIV.

The CSS now looks like this:

.vertical-text {
    font-size: 80%;
    display: inline-block;
    overflow: visible;
    width: 1.2em;
    line-height: 4.4em;
    margin-top: -1.3em;   /* THIS is what fixed it! */
    white-space: nowrap;
    transform:  rotate(90deg);
    -webkit-transform:  rotate(90deg);
}

I was able to get rid of the inner , .vertical-text-inner . For reasons I haven't figured out yet, I had to change overflow to visible.

I haven't changed the fiddle in case someone has a more elegant solution. You can see the result of the above changes in their native habitat here: http://ksuweb.kennesaw.edu/faculty/rbrow211/tlc/docs.html#uprogtable">http://ksuweb.kennesaw.edu/faculty/rbrow211/tlc/docs.html#uprogtable.

链接地址: http://www.djcxy.com/p/81752.html

上一篇: 如何限制垂直角度？ FPS glm :: lookat相机？

下一篇: 表格单元格中旋转文字的边距/填充