html - 将包装器 div 折叠到内联 block 子级

Question

我正在尝试从设置为“display:inline-block;”的 div 创建一个表。想要在整个表格中实现 1px 边框，我认为向每个子 div(每个表格单元格)添加一个 RIGHT & BOTTOM 边框然后添加一个带有 TOP 和 LEFT 边框的包装器来完成表格会很有效。它似乎运行良好，但有一个异常(exception):#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/