AS an old question, this is more like info or reminder about vertical margin or padding in % that takes parent's width as reference .

If you use a pseudo element and vertical-padding, you may basicly draw a square box or <td> : http://jsfiddle.net/qjzwG/319/

.verticalTableHeader {
text-align:center;
white-space:nowrap;
transform-origin:50% 50%;
transform: rotate(90deg); }
.verticalTableHeader:before {
content:'';
padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}

If you want to keep <td> ith a small width, table-layout:fixed + width might help. http://jsfiddle.net/qjzwG/320/

.verticalTableHeader {
text-align:center;
white-space:nowrap;
transform: rotate(90deg); }
.verticalTableHeader p {
margin:0 -100% ;
display:inline-block;
}
.verticalTableHeader p:before{
content:'';
width:0;
padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
table {
text-align:center;
table-layout : fixed;
width:150px
}

If you want table to still be able to grow from it's content but not from width of <th> , using a wrapper with a hudge negative margin opposite to dir/direction of document might do : apparently, the closest to your needs, http://jsfiddle.net/qjzwG/320/

<table border="1">
<tr>
<th class="verticalTableHeader"><p>First</p></th>
<th class="verticalTableHeader"><p>Second-long-header</p></th>
<th class="verticalTableHeader"><p>Third</p></th>
</tr>
.verticalTableHeader {
text-align:center;
white-space:nowrap;
transform: rotate(90deg);
}
.verticalTableHeader p {
margin:0 -999px;/* virtually reduce space needed on width to very little */
display:inline-block;
}
.verticalTableHeader p:before {
content:'';
width:0;
padding-top:110%;
/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
table {
text-align:center;
}

HTML from demo and base :

<table border="1">
<tr>
<th class="verticalTableHeader">First</th>
<th class="verticalTableHeader">Second</th>
<th class="verticalTableHeader">Third</th>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
</table>

For older IE , you need to use writing-mode (CSS) :http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx

REF:

http://stackoverflow.com/questions/6997631/how-to-display-vertical-text-in-table-headers-with-auto-height-without-text-ov

Creating HTML table with vertically oriented text as table header 表头文字方向的更多相关文章

  1. 论文阅读(XiangBai——【CVPR2017】Detecting Oriented Text in Natural Images by Linking Segments)

    XiangBai——[CVPR2017]Detecting Oriented Text in Natural Images by link Segments 目录 作者和相关链接 方法概括 方法细节 ...

  2. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  3. foreach statement cannot operate on variables of type 'System.Web.UI.WebControls.Table' because 'System.Web.UI.WebControls.Table' does not contain a public definition for 'GetEnumerator'

    错误:foreach statement cannot operate on variables of type 'System.Web.UI.WebControls.Table' because ' ...

  4. magento -- 解决magento错误:ERROR: Base table or view already exists: 1050 Table ... already exists

    相信有更新magento或者,备份转移magento站点的时候可能会碰到类似这样的错误提示: Base table or view already exists: 1050 Table ... alr ...

  5. (转)create table #temptable 临时表 和 declare @bianliang table ()表变量

    在开发过程中,经常会遇到使用表变量和本地临时表的情况.下面是对二者的一个介绍: 1. 为什么要使用表变量 表变量是从2000开始引入的,微软认为与本地临时表相比,表变量具有如下优点:  a.与其他变量 ...

  6. thinkphp中SQLSTATE[42S02]: Base table or view not found: 1146 Table错误解决方法

    随手记录下今天在thinkphp3.2.3中遇到的错误SQLSTATE[42S02]: Base table or view not found: 1146 Table 'test.file_info ...

  7. Flink 报错 "Could not find a suitable table factory for 'org.apache.flink.table.factories.StreamTableSourceFactory' in the classpath"

    先上代码: table = tablexx.select('*).tablexx.groupBy('x).select('x, xx.count ) tableEnvironment // decla ...

  8. create table #temptable 临时表 和 declare @bianliang table ()表变量

    create table #temptable 临时表 和 declare @bianliang table ()表变量 在开发过程中,经常会遇到使用表变量和本地临时表的情况.下面是对二者的一个介绍: ...

  9. lua中 table.getn(t) 、#t、 table.maxn(t) 这三个什么区别?

    lua中 table.getn(t) .#t. table.maxn(t) 这三个什么区别? RTlocal t = {1,888,x= 999,b=2,5,nil,6,7,[10]=1,8,{z = ...

随机推荐

  1. 怎样查出SQLServer的性能瓶颈

    怎样查出SQLServer的性能瓶颈 --王成辉翻译整理,转贴请注明出自微软BI开拓者[url]www.windbi.com[/url]--原帖地址 如果你曾经做了很长时间的DBA,那么你会了解到SQ ...

  2. Awk使用一例:获取ASCII可见字符

    要做一个需求, 支持可见特殊字符的密码设置. 首先, 需要获取到所有可见特殊字符. 到网上搜索到 ASCII 字符表格, 并复制到文本文件 vschars.txt: 00 00 0 nul 100 4 ...

  3. Delphi 调用 Rest 服务的一些

    1.关于数据接收的格式 测试发现获取的json源数据中间汉字的地方是乱码,导致引号不配对,引发内存错误. TIdHttp在获取数据之前,要将定义的TStringStream的Encoding设置为UT ...

  4. Java中的排序算法(2)

    Java中的排序算法(2) * 快速排序 * 快速排序使用分治法(Divide and conquer)策略来把一个序列(list)分为两个子序列(sub-lists). * 步骤为: * 1. 从数 ...

  5. Linux查看CPU和内存使用情况【转】

    转自:http://www.cnblogs.com/xd502djj/archive/2011/03/01/1968041.html 在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应 ...

  6. Understanding the RelationshipType Enumeration [AX 2012]

    Understanding the RelationshipType Enumeration [AX 2012] 3 out of 3 rated this helpful - Rate this t ...

  7. 【Pro ASP.NET MVC 3 Framework】.学习笔记.8.SportsStore:管理

    管理功能,如何身份认证,对controller和action方法过滤安全的访问,并在用户需要时提供证书. 1 添加分类管理 方便管理的controller,有两类页面,List页面和edit页面. 1 ...

  8. JavaScript中统计Textarea字数并提示还能输入的字符

    <span style="font-size:18px;"><script language="javascript"> functio ...

  9. mongo VUE 操作

    一  修改字段名称 db.rc_配置_付款限额_消费.update({ "生效标识" : 1, "$atomic" : "true" },{ ...

  10. 删除ecshop登录后台看到的系统信息

    登陆ecshop后台,默认打开在页面顶部会出现个系统信息,显示操作系统,数据库版本,以及安装日期系统版本号.部分客户问到怎么删除,这里最模板提供ecshop教程告诉大家方法. 找到admin\temp ...