Question

我想保留表格，但使用css通过严格的doctype实现相同的定位结果。这是完全符合我需要的设计。

请注意最后（底部）<br>单元格中的<td>标记。随着这个区域的增长，数据位于其上方的另外两个<td>单元格中的位置不会改变位置。

<table cellpadding="0" cellspacing="0" border="1" width="400" height="100%">
  <tr>
    <td valign="top">
      <table cellpadding="0" cellspacing="0" border="0" height="100%">
        <tr>
          <td valign="top">ds</td> <----- The position here is important
        </tr>
        <tr>
          <td valign="bottom">ds</td> <----- The position here is important
        </tr>
      </table>
    </td>
    <td valign="top">ada adf ad<br><br><br><br><br><br><br><br><br></td>
  </tr>
</table>

Answer 1

我做了一个示例for you here，向您展示使用Div和CSS复制该表是多么容易：

HTML：

<div id="main-div-wrap">
                <div class="left-content">
                <span class="top">ds</span>
                <span class="bottom">ds</span>
                </div>
                <div class="right-content">
                    ada adf ad
                </div>
</div>

CSS：

#main-div-wrap
{
    position: absolute;
    width: 400px;
    height: 200px;
    border: 1px solid #000;
}

.left-content
{
    width: 18%;
    float: left;
    height: 100%;
}

.right-content
{
    margin-left; 18%;
    width: auto;
    float: left;
    height: 100%;
    border-left: 1px solid #000;
}

.top 
{
    position: absolute;
    display: block;
    top: 0;
}

.bottom 
{
    position: absolute;
    display: block;
    bottom: 0;
}

所有语义，没有黑客，都会验证，如果您需要为浏览器更改它，那么more than enough tools out there to help you。

Answer 2

我不确定你的意思是“保留结构的表格”，但我想你是这样的东西，但是如果内容太短，那么“顶部”和“底部”文本会重叠

http://jsfiddle.net/HsmKA/

使用CSS样式表的变体：

http://jsfiddle.net/JmQ55/

Answer 3

您可以找到您想要的所有内容here。

Answer 4

来自一个表格自己，我总是发现DIV布局在a $$中很痛苦。查看blue print css它是一个非常易于使用的CSS框架。可能会把你排除在外

如何将此表设计与有效标记一起使用？

4 个答案: