Question

我正在尝试从设置为“display：inline-block;”的div创建一个表。想要在整个桌子上实现1px边框，我认为添加一个正确的＆amp; amp;每个子div（每个表格单元格）的BOTTOM边框然后添加一个TOP＆amp;的包装器。 LEFT边框完成表格。它似乎运行良好，但有一个例外：#table_wrapper div的宽度不会折叠到其子节点的组合宽度。任何解释？我很感谢为什么解释这个？为什么不呢？除了代码示例。

    #splash
    {
    width:700px; 
    height:150px; 
    background-color:#8DEE8C;
    text-align: center;
    }

    #table_wrapper
    {
    border-width:1px; 
    border-right:0; 
    border-bottom:0; 
    border-style:solid;
    border-color:#000000;
    font-size:0; /* to collapse white space (from hitting return in editor) b/w inline-block children */
    }

    #table_wrapper div
    {
    width:119px; 
    height:20px;
    background-color:#F5F5DB;
    border-top:0; 
    border-left:0; 
    border-right:1px; 
    border-bottom:1px; 
    border-style:solid; 
    border-color:#000000;
    display:inline-block;
    text-align:center;
    font-size:16px;
    }

    <div id="splash">
        <div id="table_wrapper">
            <div>column 1</div>
            <div>column 2</div>
            <div>column 3</div>
            <div>column 4</div>
            <div>column 5</div>
            <div>column 1</div>
            <div>column 2</div>
            <div>column 3</div>
            <div>column 4</div>
            <div>column 5</div>
            <div>column 1</div>
            <div>column 2</div>
            <div>column 3</div>
            <div>column 4</div>
            <div>column 5</div>
            <div>column 1</div>
            <div>column 2</div>
            <div>column 3</div>
            <div>column 4</div>
            <div>column 5</div>
            <div>column 1</div>
            <div>column 2</div>
            <div>column 3</div>
            <div>column 4</div>
            <div>column 5</div>
        </div>

    </div>

Answer 1

Simply because the wrapper does not cover the left border which was given as 0px. here's a working fiddle.  It will help you to understand why.

http://www.jsfiddle.net/4GHUS/

折叠Wrapper div为内联块子

1 个答案: