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

Question

我正在尝试在 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;

Answer 1

我不明白为什么不。不过，我会在底部添加一个合适的行:

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>