如何在html中创建一个看起来像这样的表，或者做一个无表格的表

时间：2012-09-03 09:18:22

标签： html css

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

enter image description here

我设法旋转文字，但问题是重叠。

这是整个结构的代码。

<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>

2 个答案:

答案 0 :(得分：2)

快速模拟：

    <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。

答案 1 :(得分：0)

在非遗留IE中旋转项目在旋转元素之前计算它的属性。这意味着整个项目和背景将移出文档流程，可能不是您想要的表格。尝试旋转细胞内容，而不是细胞本身，如下所示：

.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包装器...... 

<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>
相关问题
最新问题