0

I have the following code below that focuses on table display.

* {
  box-sizing: border-box;
}

.mother {
  width: 300px;
  margin: 2em auto;
  background: peachpuff;
  display: table;
}

.child {
  display: inline-table;
  width: 100px;
  height: 100px;
  background: cyan;
  border: 1px solid #7a7a7a;
}
<div class="mother">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

My problem is that the child boxes (.child) are not totally wrapped, leaving some little whitespaces. The question is, is it because of display: table or display: inline-table? If yes, what display value(s) should I use to prevent leaving whitespaces?

My another concern is, when I change the display value of .mother to table and .child to table-cell, the children elements fits themselves no matter the width of the parent element. For example, if the .mother has a width of 300px and each children is 100px wide, each row is supposed to contain only 3 child elements to perfectly fit the length of the parent element. With display: flex, it can be solved with flex-wrap. What property should I use in this problem?

Nhan
  • 3,595
  • 6
  • 30
  • 38
jst16
  • 84
  • 9

3 Answers3

1

Add font-size: 0 to the parent element.

* {
  box-sizing: border-box;
}

.mother {
  width: 300px;
  margin: 2em auto;
  background: peachpuff;
  display: table;
  font-size: 0;
}

.child {
  display: inline-table;
  width: 100px;
  height: 100px;
  background: cyan;
  border: 1px solid #7a7a7a;
}
<div class="mother">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
Nhan
  • 3,595
  • 6
  • 30
  • 38
  • that's a good trick, but what does `font-size` have to do with whitespaces and layout? – jst16 Nov 30 '16 at 22:35
  • @jst16 They are created from whitespace between tags, `font-size: 0` is one of the solutions [here](http://stackoverflow.com/q/5078239/2571493). – Nhan Dec 01 '16 at 02:17
  • 1
    I didn't know `font-size` can be useful not just for texts and fonts. Thanks – jst16 Dec 01 '16 at 07:28
0

Yes, it's because display:inline-table for children. It makes them behave as separate inline-level containers wrapped in the single anonymous 'cell' of the outer table.

Unfortunately, there is no table row wrapping in CSS table display. The only way to move cells to the new row is using extra wrappers with display:table-row. And why display:flex doesn't fit?

Ilya Streltsyn
  • 13,076
  • 2
  • 37
  • 57
  • is `inline-table` for parent or children? – jst16 Nov 30 '16 at 22:33
  • 1
    It's for parent. It behaves the same way as `table` inside (with its own rows and cells), but like `inline-block` outside. It's to `table` as `inline-block` is to `block`. – Ilya Streltsyn Dec 01 '16 at 06:17
  • so, is `inline-block` okay? – jst16 Dec 01 '16 at 07:27
  • Both are OK for some cases, but neither will make children behave as the cells of the parent `table`. Both inline blocks and inline tables behave as independent containers that are sized by content by default, and whitespace characters (including tabs and line breaks) between them are rendered as small text fragments consisting of one whitespace character. They both don't use any advantage of the parent's table display except automatic width by content (not used in this example since the width is fixed) and margin collapsing prevention. – Ilya Streltsyn Dec 01 '16 at 08:40
  • Thanks for the idea – jst16 Dec 03 '16 at 05:43
0

* {
  box-sizing: border-box;
}

.mother {
  width: 300px;
  margin: 2em auto;
  background: peachpuff;
  display: table;
  font-size: 0;
}

.child {
  display: inline-table;
  width: 100px;
  height: 100px;
  background: cyan;
  border: 1px solid #7a7a7a;
  margin: -5px -2px;
}
<div class="mother">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

It's a bit hacky but it might solve your issue.

bytanyar
  • 17
  • 2