如何设置不同宽度的div表？

Question

我有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得到不同的宽度但同步。

Answer 1

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

Answer 2

添加正确的显示样式：

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

Answer 3

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

Answer 4

我会这样做的。你可以尝试，但它可能不是最好的答案。

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