Проблемы с отображением таблицы в CSS и дальнейшие идеи

Question

У меня есть следующий ниже код, который фокусируется на отображении таблицы.

* { 
 
    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>

Моя проблема заключается в том, что дочерние окна (.child) не полностью завернуты, в результате чего некоторые небольшие пробелы. Вопрос в том, из-за display: table или display: inline-table? Если да, то какие значения display следует использовать для предотвращения удаления пробелов?

Моя другая забота, когда я изменить значение display из .mother к table и .child к table-cell, что дочерние элементы не приспосабливает себя независимо от ширины родительского элемента. Например, если .mother имеет ширину 300 пикселей, а каждый ребенок имеет ширину 100 пикселей, каждая строка должна содержать только 3 дочерних элемента, чтобы идеально соответствовать длине родительского элемента. С display: flex его можно решить с помощью flex-wrap. Какую собственность я должен использовать в этой проблеме?

Answer 1

Добавить font-size: 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; 
 
}

<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>

Answer 2

Да, это потому, что display:inline-table для детей. Это заставляет их вести себя как отдельные контейнеры на линейном уровне, завернутые в одну анонимную «ячейку» внешней таблицы.

К сожалению, в таблице таблиц CSS нет обертки строки таблицы. Единственный способ переместить ячейки в новую строку - использовать дополнительные обертки с display:table-row. А почему display:flex не подходит?

Answer 3

* { 
 
    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>

Это немного Hacky, но это может решить вашу проблему.