CODEWITHSUNDEEP
htmlcsscss-tables
oded
oded

Reputation: 155

How do I set div like table with different width?

I have div to look like table, this is my code:

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

Now all the the columns are in different width, and I don't know why. I want that div get different width but synchronize.

Upvotes: 0

Views: 81

Answers (4)

FU CHUN TSENG
FU CHUN TSENG

Reputation: 1

I will do like this. You can try, but it may not be the best answer.

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

Upvotes: 0

Rahele Dadmand
Rahele Dadmand

Reputation: 573

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

Upvotes: 0

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

using display:table like this 

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

Upvotes: 2

connexo
connexo

Reputation: 56783

Add the correct display styles:

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

Upvotes: 0

Related Questions