如何使用一系列ID的CSS设置表格

debugcn 发表于 Dev

Imduncan

我正在尝试使用CSS中的一系列样式div ID创建一个表。我在设计div时遇到了真正的麻烦。有人可以告诉我是否正在采用这种正确方法吗？

牢记“表”将用于检索实时数据，希望如此！因此我可能需要列宽来自动调整以适合生成的字符串的字符长度。

-----------------------------------------------------------------------------------------
                                   Top Column
-----------------------------------------------------------------------------------------
     Column one            |             Column two              |  Column Three

的HTML

  <div id="container">
            <div id="top_row">
                <h3>Top row</h3>
            </div>
                <div id="column_one">
                    <h3>column one</h3>
                </div>
                <div id="column_two">
                    <h3>column two</h3>
                </div>
                <div id="column_three">
                    <h3>column three</h3>
                </div>

          </div>

的CSS

#container {

    display: table;
    border:1px solid #dedede;
    }

    #top_row {
    display: table-row;
    }

    #column_one, #column_two, #column_three {

    display: inline-block;
    text-align: center;
    margin-top:50px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing:1.5px;

伊瑟伍德

我不明白为什么不这样。不过，我会在底部添加一个适当的行：

http://jsfiddle.net/isherwood/jcg8Y/

<div id="container">
    <div id="top_row">
         <h3>Top row</h3>

    </div>
    <div id="bottom_row">
        <div id="column_one">
             <h3>column one</h3>

        </div>
        <div id="column_two">
             <h3>column two</h3>

        </div>
        <div id="column_three">
             <h3>column three</h3>

        </div>
    </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。