文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在html中制作类似这样的表格或制作无表格的表格

问如何在html中制作类似这样的表格或制作无表格的表格
EN

Stack Overflow用户
提问于 2012-09-03 17:18:22
回答 2查看 725关注 0票数 0

我有一个在html中显示数据的标题。下面是我正在努力的标题的一部分的图像。

​

​

我已经设法旋转了文本，但问题是有重叠。

这是整个结构的代码。

代码语言：javascript
复制
<style type="text/css"> .text-rotation {
            -webkit-transform: rotate(90deg); 
            -moz-transform: rotate(90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
            height:inherit;
            }
</style>
</head>

<body>
<table width="100%" border="1" align="center" cellpadding="3" cellspacing="1">
  <tr>
    <td rowspan="5">&nbsp;</td>
    <td rowspan="5" align="center" valign="bottom">Code</td>
    <td rowspan="5" align="center" valign="bottom">Change</td>
    <td rowspan="5" align="center" valign="bottom">Description</td>
    <td colspan="6" align="center" bgcolor="#FF6666">STOCK RANGE</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2" align="center" bgcolor="#66CC00" >SPHERICAL</td>
    <td colspan="2" align="center" bgcolor="#FFCC00" >SPH/CYL-/-</td>
    <td colspan="2" align="center" bgcolor="#0066CC">SPH/CYL+/-</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation">MINUS</td>
    <td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation">PLUS</td>
    <td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation">MINUS</td>
    <td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation">PLUS</td>
    <td rowspan="3" align="center" bgcolor="#0066CC"  class="text-rotation">PLUS</td>
    <td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation">MINUS</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-09-03 17:28:18

一个快速模型：

代码语言：javascript
复制
    <table border="1">
    <tr>
        <td colspan="6">STOCK RANGE</td>
        <td colspan="11">LENS PROPERTIES</td>        
    </tr>
    <tr>
        <td colspan ="2">SPHERICAL</td>
        <td colspan ="2">SPH/CYL</td>
        <td colspan ="2">SPH/CYL</td>
        <td rowspan="2">Stock</td>
        <td rowspan="2">Disclaimer</td>
        <td rowspan="2">Index</td>
        <td rowspan="2">UV Coating</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
    </tr>
    <tr>
        <td>LEFT1</td>
        <td>LEFT2</td>
        <td>LEFT3</td>
        <td>LEFT4</td>
        <td>LEFT4</td>
        <td>LEFT5</td>
    </tr>
    <tr>
        <td>DATA_LEFT_1</td>
        <td>DATA_LEFT_2</td>
        <td>DATA_LEFT_3</td>
        <td>DATA_LEFT_4</td>
        <td>DATA_LEFT_5</td>
        <td>DATA_LEFT_6</td>
        <td>DATA_RIGHT_1</td>
        <td>DATA_RIGHT_2</td>
        <td>DATA_RIGHT_3</td>
        <td>DATA_RIGHT_4</td>
        <td>DATA_RIGHT_5</td>
        <td>DATA_RIGHT_6</td>
        <td>DATA_RIGHT_7</td>
        <td>DATA_RIGHT_8</td>
        <td>DATA_RIGHT_9</td>
        <td>DATA_RIGHT_10</td>
        <td>DATA_RIGHT_11</td>
    </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

编辑2:这个的一些视觉效果：jsFiddle

编辑3:结合了其他答案的一些新的视觉效果：jsFiddle。

票数 2
EN

Stack Overflow用户

发布于 2012-09-03 17:39:18

在非遗留项目中旋转-IE会在旋转元素之前计算其属性。这意味着整个项目和背景将移到文档流之外，这可能不是您希望在表格中显示的内容。尝试旋转单元格内容，而不是单元格本身，如下所示：

代码语言：javascript
复制
.text-rotation > * {
        -webkit-transform: rotate(90deg); 
        -moz-transform: rotate(90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
        height:inherit;
}

..。并在单元格内容周围添加通用display:block包装器...

代码语言：javascript
复制
<td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation"><div>MINUS</div></td>
<td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation"><div>PLUS</div></td>
<td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation"><div>MINUS</div></td>
<td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation"><div>PLUS</div></td>
<td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation"><div>PLUS</div></td>
<td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation"><div>MINUS</div></td>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/12245053

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档