1

Here is my code: http://jsfiddle.net/8z4aw/

I want to have a bunch of div's that are behaving like a table. As you can see, I have specified explicitly their widths, but the browser is completely ignoring it and doing what it wants. Also, it appears that those div's are having a right margin, that is not specified anywhere. So where does it come from? How to fix those two problems?

Ignore code below, pasting it only so that post will go through

.standardTable {
    color: #fff;
}
ojek
  • 9,680
  • 21
  • 71
  • 110
  • 1
    Should `.standardTable .tr` be `.standardTable .row`? – j08691 May 24 '13 at 00:03
  • 1
    It looks like the whitespace between your `div`s causes spaces between the "cells". Check it out: http://jsfiddle.net/8z4aw/1/ Here is an article about `inline-block` and white space: http://doctype.com/csss-inlineblock-white-space-between-items. You might have an easier time using a table for tabular data: http://stackoverflow.com/questions/6637629/divs-vs-tables-for-tabular-data – showdev May 24 '13 at 00:06
  • Uh, yeah, it should. `http://jsfiddle.net/8z4aw/2/` here is the updated fiddle – ojek May 24 '13 at 00:06
  • @showdev: I don't know why, but trimming those div's helped removing whitespaces. Thanks. Also, I was using tables, but they too didn't want to cooperate - widths were set randomly as is with those div's now. :/ – ojek May 24 '13 at 00:10
  • Tables are intended for tabular data. Rows and cells will line up automatically in a grid. You can set widths of the cells if you like, but you may not need to. Here's a sample: http://jsfiddle.net/8z4aw/15/ – showdev May 24 '13 at 00:25

2 Answers2

2

You have a couple options:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

My preferred is to set the font-size of the parent element to 0 and set the font-size on the children manually:

http://jsfiddle.net/8z4aw/9/

This is what I changed in the CSS:

.standardTable {
    font-size: 0;
}

.standardTable .td, 
.standardTable .th,
.standardTable .tr {
    font-size: 18px;
}
bfuoco
  • 715
  • 4
  • 12
1

Well the widths aren't behaving because you have two different sets of padding on them, due to the "th" and "td" classes.

So, anything with the classes "th integer" is going to have a width of 181px and a padding of 10px. This adds up to a total width of 201px

However, anything with the classes "td integer" has a width of 181px and a padding of 20px, which means they have a total width of 221px

So, due to your padding, those are always going to be 20px different from one another.

The reason you have a "right margin" is because the table with class "standardTable" is actually inheriting it's width from the js fiddle window, which means it is 100%. You need it to be set to a fixed with that adds up to all the cells inside.

You can see the problem here:

            <div class="th integer">
                Podkategorii
            </div>

            <div class="td integer">
                0
            </div>

            .standardTable .th {
                display: inline-block;
                background-color: #2b5797;
                padding: 10px;
            }

            .standardTable .td {
                display: inline-block;
                background-color: #2d89ef;
                padding: 20px;
            }

Here's a working fiddle:

http://jsfiddle.net/shayl/8z4aw/13/

Stacey Garrison
  • 148
  • 8