У меня есть div, чтобы выглядеть как таблица, это мой код:

.cell {
  border: 1px solid red;
  display: table-cell
}

.tableLike {
  padding-bottom: 30px;
  display: table
}

.rowLike {
  display: table-row
}

.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
  width: 15%;
}
<div class="tableLike ">
  <div class="rowLike">
    <div class="cell"></div>
    <div class="cell">
      <div class="title">PRODUCT</div>
    </div>
    <div class="cell">
      <div class="title">PRICE</div>
    </div>
  </div>

  <div class="rowLike">
    <div class="cell">
      <i class="icon-close">X</i>
    </div>
    <div class="cell">
      some content
    </div>
    <div class="cell bolder">
      $30
    </div>
  </div>
  <div class="rowLike">
    <div class="cell">
      <i class="icon-close">X</i>
    </div>
    <div class="cell">
      some content some content
    </div>
    <div class="cell bolder">
      $8
    </div>
  </div>
</div>

Теперь все столбцы имеют разную ширину, и я не знаю почему. Я хочу, чтобы div получал другую ширину, но синхронизировал.

0
oded 1 Мар 2018 в 11:27

4 ответа

Лучший ответ

Используя display: table вот так

.tableLike{width:100%;display:table;}
.cell{border:1px solid red;display:table-cell;}
.tableLike {display:table;}
.rowLike{display:table-row;}
.cell{border:1px solid red;display:table-cell;}
.tableLike{padding-bottom: 30px;}
.rowLike .cell:nth-child(1),.rowLike .cell:nth-child(3){ width: 15%;}
<div class="tableLike ">
    <div class="rowLike">
        <div class="cell"></div>
            <div class="cell">
                <div class="title">PRODUCT</div>
            </div>
            <div class="cell">
                <div class="title">PRICE</div>
            </div>
        </div>

        <div class="rowLike">
            <div class="cell">
                <i class="icon-close">X</i>
            </div>
            <div class="cell">
                some content
            </div>
            <div class="cell bolder">
               $30
            </div>
        </div>
        <div class="rowLike">
            <div class="cell">
                <i class="icon-close">X</i>
            </div>
            <div class="cell">
                some content some content
            </div>
            <div class="cell bolder">
                $8
            </div>
        </div>
    </div>
2
Hiren Vaghasiya 1 Мар 2018 в 08:37

Я сделаю так Вы можете попробовать, но это может быть не самый лучший ответ.

.cell {
  border-right:1px solid red;
  border-bottom:1px solid red;
  display: table-cell
}

.tableLike {
  padding-bottom: 30px;
  display: table
}

.rowLike {
  display: table-row
}

.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
  width: 15%;
}

.rowLike:nth-child(1) .cell:nth-child(1),
.rowLike:nth-child(1) .cell:nth-child(2),
.rowLike:nth-child(1) .cell:nth-child(3){
  border-top:1px solid red;
}

.rowLike:nth-child(1) .cell:nth-child(1),
.icon-close{
  border-left:1px solid red;
}
<div class="tableLike ">
  <div class="rowLike">
    <div class="cell"></div>
    <div class="cell">
      <div class="title">PRODUCT</div>
    </div>
    <div class="cell">
      <div class="title">PRICE</div>
    </div>
  </div>

  <div class="rowLike">
    <div class="cell">
      <i class="icon-close">X</i>
    </div>
    <div class="cell">
      some content
    </div>
    <div class="cell bolder">
      $30
    </div>
  </div>
  <div class="rowLike">
    <div class="cell">
      <i class="icon-close">X</i>
    </div>
    <div class="cell">
      some content some content
    </div>
    <div class="cell bolder">
      $8
    </div>
  </div>
</div>
0
FU CHUN TSENG 1 Мар 2018 в 10:17
.tableLike {display:table;}
.rowLike{display:table-row;}
.cell{border:1px solid red;display:table-cell;}
.tableLike{padding-bottom: 30px;}
.rowLike .cell:nth-child(1),.rowLike .cell:nth-child(3){ width: 33%;}
<div class="tableLike ">
    <div class="rowLike">
        <div class="cell"></div>
            <div class="cell">
                <div class="title">PRODUCT</div>
            </div>
            <div class="cell">
                <div class="title">PRICE</div>
            </div>
        </div>

        <div class="rowLike">
            <div class="cell">
                <i class="icon-close">X</i>
            </div>
            <div class="cell">
                some content
            </div>
            <div class="cell bolder">
               $30
            </div>
        </div>
        <div class="rowLike">
            <div class="cell">
                <i class="icon-close">X</i>
            </div>
            <div class="cell">
                some content some content
            </div>
            <div class="cell bolder">
                $8
            </div>
        </div>
    </div>
0
Rahele Dadmand 1 Мар 2018 в 08:41

Добавьте правильные стили отображения:

.cell {
  border: 1px solid red;
  display: table-cell;
}

.tableLike {
  padding-bottom: 30px;
  display: table;
}

.rowLike {
  display: table-row;
}

.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
  width: 15%;
}
<div class="tableLike ">
  <div class="rowLike">
    <div class="cell"></div>
    <div class="cell">
      <div class="title">PRODUCT</div>
    </div>
    <div class="cell">
      <div class="title">PRICE</div>
    </div>
  </div>

  <div class="rowLike">
    <div class="cell">
      <i class="icon-close">X</i>
    </div>
    <div class="cell">
      some content
    </div>
    <div class="cell bolder">
      $30
    </div>
  </div>
  <div class="rowLike">
    <div class="cell">
      <i class="icon-close">X</i>
    </div>
    <div class="cell">
      some content some content
    </div>
    <div class="cell bolder">
      $8
    </div>
  </div>
</div>
0
connexo 1 Мар 2018 в 08:33