2

我正在尝试使用 CSS 生成动态表：

<html>
<head>
  <style>
    div.el1, div.el2 {
        color:white;
        width:70px;height:70px;
        border:0px;
        padding:0px;
        font-size: 10px;
        font-family: "Courier";
    }

    div.el1 {
        background-color: green;
    }

    div.el2 {
        background-color: orange;
    }

    div.tablediv {
        display: table;
        border:0px;
        border-spacing:0px;
        border-collapse:separate;
    }

    div.celldiv {
        display: table-cell;
    }

    div.rowdiv {
        display: table-row;
        width:auto;
    }

</style>

</head>
<body>

<div class="tablediv">
    <div class="rowdiv">
        <div class="celldiv">
            <div class="el1" id="x1y1">ABC</div>
        </div>
        <div class="celldiv">
            <div class="el2" id="x1y2"></div>
        </div>
    </div>
    <div class="rowdiv">
        <div class="celldiv">
            <div class="el1" id="x2y1"></div>
        </div>
        <div class="celldiv">
            <div class="el1" id="x2y2"></div>
        </div>
    </div>
</div>

</body>
</html>

body 的内容是动态生成的，应该以表格的形式显示。不幸的是，如果每个单元格包含数据，它就会向下移动：

expected   reality
 --- ---    --- ---
|   |   |  |   |   |
 --- ---   |ABC|---
|   |   |  |   |   | 
 --- ---    --- ---
           |   |   |
            --- ---

我很感激任何帮助。

编辑：

添加垂直对齐：中间；到 div.celldiv 解决了问题，但我不明白原因。特别是因为内容仍然与单元格的顶部对齐。

4

3 回答 3

3

我可以帮忙……用一张桌子！

如果是表格数据，那么使用表格是完美的！

我知道这有点蹩脚的答案，但你能解释一下你为什么不使用表格吗？

于 2010-03-17T09:46:25.307 回答
3

我认为您可能会对“转向 CSS”的意图感到困惑——使用 CSS 并不意味着废弃所有有意义的 HTML 并将每个标签替换为<div>.

使用 CSS 进行 Web 开发意味着使用最合适的HTML 标签，然后使用 CSS 对其进行样式设置。在您的情况下，您正在制作一个表格数据表，因此您应该<table>照常使用该元素。

即使您的数据不是真正的表格数据，那么您仍然不需要使用那些可怕的<div>标签，每个框只需要一个（即总共四个标签），具有宽度、可选高度和float:left应用。

这两种解决方案都将比任何方式都更加跨浏览器display:table。

于 2010-03-17T14:37:19.517 回答
0

只需将浮点数添加到您的单元格中，您就会得到正确的结果。工作示例和代码：

<html>
<head>
  <style>
    div.el1, div.el2 {
        color:white;
        width:70px;height:70px;
        border:0px;
        padding:0px;
        font-size: 10px;
        font-family: "Courier";
    }

    div.el1 {
        background-color: green;
        float:left;
    }

    div.el2 {
        background-color: orange;
        float:right;
    }

    div.tablediv {
        display: table;
        border:0px;
        border-spacing:0px;
        border-collapse:separate;
    }

    div.celldiv {
        display: table-cell;
    }

    div.rowdiv {
        display: table-row;
        width:auto;
    }

</style>

</head>
<body>

<div class="tablediv">
    <div class="rowdiv">
        <div class="celldiv">
            <div class="el1" id="x1y1">ABC</div>
        </div>
        <div class="celldiv">
            <div class="el2" id="x1y2">aaa</div>
        </div>
    </div>
    <div class="rowdiv">
        <div class="celldiv">
            <div class="el1" id="x2y1">bbb</div>
        </div>
        <div class="celldiv">
            <div class="el1" id="x2y2">ccc</div>
        </div>
    </div>
</div>

</body>

​</p>

于 2010-03-17T09:48:52.560 回答