Question

I am trying to recreate a table element using inline blocks of fixed width, and I am suffering an apparently inconsistent behavior from the browsers (Chrome and IE) in spacing elements.

Here is an image of the problem:

the problem is that the first in the top two rows (which should act as headers and are part of the static HTML of the page) the span get a strange spacing on the right – as you can read below from the CSS there is a margin of 0 declared (this is obviously a WIP, some span should just be replaced by divs etc. so pls bear with me.).

If I instead add dynamically the rows at run time through Javascript, I get the two rows below – which is the expected behavior. In blue you can find the container of these rows – 100% of the div element including all of this.
Ther reason I am using this approach instead of a normal table is that I want to have the dynamic data rows scrollable, which is not achieveable in a neat way with a table.

Here is the HTML:

 <span class="cssTRC">
            <span>
                <span>Day</span>
                <span>Loc</span>
                <span>Nagare</span>
                <span>Pcs</span>
                <span>Packs</span>
            </span>
            <span>
                <span>Thu 30 Aug</span>
                <span>E5-1</span>
                <span>{only DI}</span>
                <span>480</span>
                <span>1</span>
            </span>
    </span>
   <span id="ctblrcOrdHist" class="cssTRC">
         <span>
              <span>Thu 30 Aug</span>
              <span>E5-1</span>
              <span>DI</span>
              <span>480</span>
              <span>1</span>
         </span> 
         <span>
            <span>Thu 30 Aug</span>
            <span>KE-1</span>
            <span>DI</span>
            <span>500</span> 
            <span>1</span>
         </span>
      </span>

and the CSS, defined as follows:

.cssTH>span>span,.cssTRC>span>span
{
    display:inline-block;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    font-size:1em;
    box-sizing:border-box;
    width:5em;
    padding:0.2em;
    margin:0;
    border:0 solid red/*#E8EEF4;*/;
    border-width:0 0 1px 1px;
}
.cssTH>span, .cssTRC>span
{
    display:block;
}
.cssTRC
{
    border:0 solid #E8EEF4;
    border-width:1px 1px 0 0 ;
    display:block;
    /*max-height:200px;
    overflow-y:auto;*/
    box-sizing:content-box;
} 

The question is obviously how I can get the expected behavior for the first two rows without adding the pseudo-header at run time (which sounds horrible).

EDIT

I write down the solution I consider more handy so that this can work also as a small example of basic CSS table layout, in case someone might need it:

            <div>
                 <span>Day</span
                ><span>Loc</span
                ><span>Nagare</span
                ><span>Pcs</span
                ><span>Packs</span>
            </div> 

Answer 1

The problem cause by whitespace between your spans – DEMO

I’ve used the float fix in this example. For more ways of fixing this issue you can take a look here