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 = ...
随机推荐
- Fury观后感
刚看完,淋雨汽车回来的,电影很精彩.前期略慢热(我还去了躺厕所),军人的黑色幽默,冷酷的军旅生活作为基调.内容我就不ao述了,新兵蛋诺曼的经历是这部电影的为主线(也有人说诺曼是观众的代入点,准确来说他 ...
- WebDriver一些常见问题的解决方法【转】
转至:http://www.cnblogs.com/sylovezp/p/4329770.html 1.Exception NoSuchElementException: 解决方法: 1)检查目标el ...
- struts2 18拦截器详解(七)
ChainingInterceptor 该拦截器处于defaultStack第六的位置,其主要功能是复制值栈(ValueStack)中的所有对象的所有属性到当前正在执行的Action中,如果说Valu ...
- Backup: Array in Perl6
Array in Perl6 继承List,而List又继承Iterable,Positional,Cool ARRAY.pop ARRAY.shift ARRAY.push: VALUES ARRA ...
- 2.1:你的第一个AngularJS App
本章,带你体验一个简单的开发流程,将一个静态的使用模拟数据的应用,变成具有AngularJS特性的动态web应用.在6-8章,作者将展示如何创建一个更复杂,更真实的AngularJS应用. 1.准备项 ...
- 2、HTML
软件的结构: C/S(Client Server)结构的软件: 比如: QQ. 极品飞车. 飞信 . 迅雷 cs结构的软件的缺点:更新的时候需要用户下载更新包然后再安装,程序员则需要开发客户端与服务端 ...
- iOS开发必备HUD(透明指示层)
iOS开发必备HUD(透明指示层) 字数421 阅读2123 评论1 喜欢51 1.MBProgressHUD GitHub地址:https://github.com/jdg/MBProgressHU ...
- JSONArray遍历
java代码 方法一: 1 2 3 4 5 JSONArray array = JSONArray.fromObject(data); for (Object object : array) { ...
- symfony中twig的模板载入
模板 载入模板 {% include ‘sidebar.html’ %} 当前模板的变量也会传递到 被include的模板里,在那里面可以直接访问你这个模板的变量. {% for comment in ...
- Python 字典(Dictionary)
字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 ,格式如下所示: d = ...