相关疑难解决方法(0)

垂直旋转HTML表格标题单元格内的文本

我使用以下css旋转表头单元格内的文本,但标题单元格的宽度与文本是水平的相同.如何旋转文本,宽度将自动减少..

    table#MyTable tr th a{
    color: #FFFFFF;
    display: block;
    /*Firefox*/
    -moz-transform: rotate(-90deg);
    /*Safari*/
    -webkit-transform: rotate(-90deg);
    /*Opera*/
    -o-transform: rotate(-90deg);
    /*IE*/
    writing-mode: tb-rl;
    filter: flipv fliph;
    padding: 60px 1px;
}
Run Code Online (Sandbox Code Playgroud)

css html-table

32
推荐指数
4
解决办法
5万
查看次数

创建具有垂直方向文本的HTML表作为表头

我想创建一个HTML表格,其中垂直书写文本作为标题(即标题文本旋转90度).我正在使用flollowing风格

<th style="-webkit-transform:rotate(90deg); writing-mode:tb-rl; -moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:blocking; padding-left:1px;padding-right:1px;padding-top:10px;padding-bottom:10px; " align="left"  id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>
Run Code Online (Sandbox Code Playgroud)

在MS IE 9.x中显示OK.在Firefox和Chrome中,标题似乎浮动在表格的顶部,它与下面的表格行重叠.有人可以帮忙吗?我很简单,不知道为什么会这样.我从本教程开始:http://scottgale.com/blog/css-vertical-text/2010/03/01/

TIA,Tamas

html css vertical-text

6
推荐指数
2
解决办法
5万
查看次数

将html表沿逆时针方向旋转90度

我想将整个桌子逆时针旋转90度.即.应将td(row = ith,column = jth)的内容传送到td(row =(行数总数-j + 1)th,column = ith).div内的文本也应该旋转90度.

<table><tbody>
<tr><td>a</td><td>1</td><td>8</td></tr>
<tr><td>b</td><td>2</td><td>9</td></tr>
<tr><td>c</td><td>3</td><td>10</td></tr>
<tr><td>d</td><td>4</td><td>11</td></tr>
<tr><td>e</td><td>5</td><td>12</td></tr>
<tr><td>f</td><td>6</td><td>13</td></tr>
<tr><td>g</td><td>7</td><td>14</td></tr>
</tbody></table>   
Run Code Online (Sandbox Code Playgroud)

这个表应该转换为

<table><tbody>
<tr>
    <td>8</td><td>9</td><td>10</td><td>11</td>
    <td>12</td><td>13</td><td>14</td>
</tr>
<tr>
    <td>1</td><td>2</td><td>3</td><td>4</td>
    <td>5</td><td>6</td><td>7</td>
</tr>
<tr>
    <td>a</td><td>b</td><td>c</td><td>d</td>
    <td>e</td><td>f</td><td>g</td>
</tr>
</tbody></table> 
Run Code Online (Sandbox Code Playgroud)

我可以通过javascript循环来做到这一点.但它很长.我想知道是否有更优雅的方式.提前致谢.

html jquery

6
推荐指数
1
解决办法
2万
查看次数

标签 统计

css ×2

html ×2

html-table ×1

jquery ×1

vertical-text ×1