0

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:

enter image description here

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>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
eddo
  • 2,094
  • 1
  • 25
  • 31

2 Answers2

2

Leave no space between </span> and <span> when using inline-block (any kind of whitespace you might have between two elements matters when you're using display: inline-block on them).

Like this:

<span>Day</span><span>Loc</span>

When you add them via JavaScript, no whitespace is inserted between the closing tag and the next opening tag, that's why it looks fine in that case.

Ana
  • 35,599
  • 6
  • 80
  • 131
2

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

Community
  • 1
  • 1
Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
  • Thanks Zoltan, my bad, it is not the first time I fall in this trap, still did not manage to hammer in my head. Still cannot understand the reason of this, but yep, that's the issue. – eddo Sep 02 '12 at 14:49
  • you are welcome :) I know that most of these cases occurs with `
  • `-s, so when it happens with other elements (which usually behave "correctly") it's not the first thing you think about
    • – Zoltan Toth Sep 02 '12 at 14:55