Creating HTML table with vertically oriented text as table header 表头文字方向
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 表头文字方向的更多相关文章
- 论文阅读(XiangBai——【CVPR2017】Detecting Oriented Text in Natural Images by Linking Segments)
XiangBai——[CVPR2017]Detecting Oriented Text in Natural Images by link Segments 目录 作者和相关链接 方法概括 方法细节 ...
- 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; ...
- 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 ' ...
- magento -- 解决magento错误:ERROR: Base table or view already exists: 1050 Table ... already exists
相信有更新magento或者,备份转移magento站点的时候可能会碰到类似这样的错误提示: Base table or view already exists: 1050 Table ... alr ...
- (转)create table #temptable 临时表 和 declare @bianliang table ()表变量
在开发过程中,经常会遇到使用表变量和本地临时表的情况.下面是对二者的一个介绍: 1. 为什么要使用表变量 表变量是从2000开始引入的,微软认为与本地临时表相比,表变量具有如下优点: a.与其他变量 ...
- 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 ...
- 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 ...
- create table #temptable 临时表 和 declare @bianliang table ()表变量
create table #temptable 临时表 和 declare @bianliang table ()表变量 在开发过程中,经常会遇到使用表变量和本地临时表的情况.下面是对二者的一个介绍: ...
- 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 = ...
随机推荐
- 怎样查出SQLServer的性能瓶颈
怎样查出SQLServer的性能瓶颈 --王成辉翻译整理,转贴请注明出自微软BI开拓者[url]www.windbi.com[/url]--原帖地址 如果你曾经做了很长时间的DBA,那么你会了解到SQ ...
- Awk使用一例:获取ASCII可见字符
要做一个需求, 支持可见特殊字符的密码设置. 首先, 需要获取到所有可见特殊字符. 到网上搜索到 ASCII 字符表格, 并复制到文本文件 vschars.txt: 00 00 0 nul 100 4 ...
- Delphi 调用 Rest 服务的一些
1.关于数据接收的格式 测试发现获取的json源数据中间汉字的地方是乱码,导致引号不配对,引发内存错误. TIdHttp在获取数据之前,要将定义的TStringStream的Encoding设置为UT ...
- Java中的排序算法(2)
Java中的排序算法(2) * 快速排序 * 快速排序使用分治法(Divide and conquer)策略来把一个序列(list)分为两个子序列(sub-lists). * 步骤为: * 1. 从数 ...
- Linux查看CPU和内存使用情况【转】
转自:http://www.cnblogs.com/xd502djj/archive/2011/03/01/1968041.html 在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应 ...
- Understanding the RelationshipType Enumeration [AX 2012]
Understanding the RelationshipType Enumeration [AX 2012] 3 out of 3 rated this helpful - Rate this t ...
- 【Pro ASP.NET MVC 3 Framework】.学习笔记.8.SportsStore:管理
管理功能,如何身份认证,对controller和action方法过滤安全的访问,并在用户需要时提供证书. 1 添加分类管理 方便管理的controller,有两类页面,List页面和edit页面. 1 ...
- JavaScript中统计Textarea字数并提示还能输入的字符
<span style="font-size:18px;"><script language="javascript"> functio ...
- mongo VUE 操作
一 修改字段名称 db.rc_配置_付款限额_消费.update({ "生效标识" : 1, "$atomic" : "true" },{ ...
- 删除ecshop登录后台看到的系统信息
登陆ecshop后台,默认打开在页面顶部会出现个系统信息,显示操作系统,数据库版本,以及安装日期系统版本号.部分客户问到怎么删除,这里最模板提供ecshop教程告诉大家方法. 找到admin\temp ...