0

I have a div table. But colspan(beige colored area) doesn't work on desktop view. I think works correctly on mobile view. Do you have an ideas? How can i do that? How can i fix this colspan issue? Thank you for all by now.

<div class="divTable">
  <div class="tHead">
    <div class="tr">
      <div class="th">&nbsp;</div>
      <div class="th">Header 1</div>
      <div class="th">Header 2</div>
    </div>
  </div>
  <div class="tBody">
    <div class="tr">
      <div class="td">Feature 1</div>
      <div class="td check colspan">✔</div>
    </div>
    <div class="tr">
      <div class="td">Feature 2</div>
      <div class="td remove">x</div>
      <div class="td check">✔</div>
    </div>
    <div class="tr">
      <div class="td">Feature 3</div>
      <div class="td remove">x</div>
      <div class="td remove">x</div>
    </div>
    <div class="tr">
      <div class="td">Feature 4</div>
      <div class="td remove">x</div>
      <div class="td remove">x</div>
    </div>
  </div>
  <div class="tFooter">
    <div class="tr">
      <div class="td">&nbsp;</div>
      <div class="td">Footer 1</div>
      <div class="td">Footer 2</div>
    </div>
  </div>
</div>

    * {
  box-sizing: border-box;
}
.divTable {
  display: table;
  width: 100%;
}
.tHead {
  display: table-header-group;
  color: #fff;
  background: #009fc8;
  font-weight: bold;
  font-size: 25px;
}
.tBody {
  display: table-row-group;
  font-weight: bold;
  font-size: 25px;
}
.tFooter {
  display: table-footer-group;
  color: #fff;
  background: #009fc8;
  font-weight: bold;
  font-size: 25px;
}
.tr {
  display: table-row;
  font-weight: bold;
  font-size: 25px;
}
.td,
.th {
  display: table-cell;
  padding: 10px;
  text-align: center;
  font-size: 22px;
  word-wrap: break-word;
}
.td {
  font-weight: bold;
}
.colspan {
  background: beige;
  text-align: center;
}
.check {
  color: limegreen;
  font-size: 30px;
}
.remove {
  color: red;
  font-size: 30px;
}
.th:first-child,
.td:first-child {
  font-weight: bold;
  color: black;
}
@media screen and (max-width: 768px) {
  .check {
    color: limegreen;
    font-size: 20px;
  }
  .remove {
    color: red;
    font-size: 20px;
  }
  .tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  .td,
  .th {
    display: block;
    width: 33.333333333333%;
    font-size: 20px;
  }
  .th:first-child,
  .td:first-child {
    background: #efefef;
    width: 100%;
  }
  .th:first-child {
    display: none;
  }
  .colspan {
    width: 100%;
  }
}

https://codepen.io/23ds/pen/wvqmMWY

For STOF: :))

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse...

  • What exactly do you mean by 'doesn't work on desktop view'? What are you expecting, what's the case instead? – Corrl Nov 06 '21 at 10:48
  • @Corrl I expect it to be like in the mobile view.. full width. ;) –  Nov 06 '21 at 10:55
  • So you expect it to span over two columns but that's not set anywhere, there's just the third cell in the row missing. It looks like 'colspan' is not an option with div-table-elements (have a look at [this question](https://stackoverflow.com/questions/4746061/div-table-colspan-how/4746179)) so I'd recommend, like the given answer does, to use table/tr/td elements instead. That has on top the advantage that you can directly style the elements instead of having to set all the class names accordingly – Corrl Nov 06 '21 at 11:21
  • You commented below "I know but i don't use element." - what's the reason for not doing so?
     – Corrl Nov 06 '21 at 11:26

2 Answers2

1

Since there's apparently no way at the moment to set the colspan on a div-table-element and using table/tr/td elements instead would restrict the responsive styling possibilities, you could instead use display: grid for building the layout. The code below should 'behave' the same as the one in your question, but with .colspan spanning over two columns.

* {
  box-sizing: border-box;
}

.gridTable {
  display: grid;
  grid-template-columns: auto auto auto;
  width: 100%;
}

.th, .footer {
  background: #009fc8;
}

.td,
.th {  
  padding: 10px;
  text-align: center;
  font-size: 22px;
  word-wrap: break-word;
}

.td {
  font-weight: bold;
}

.colspan {
  grid-column: span 2;
  background: beige;
  text-align: center;    
}

.check {
  color: limegreen;
  font-size: 30px;
}
.remove {
  color: red;
  font-size: 30px;
}

@media screen and (max-width: 768px) {
 
 .gridTable {  
  grid-template-columns: auto auto;  
}
.no-mobile {
 display: none;
}
.feature {
  grid-column: span 2;
}
<div class="gridTable">  
    
      <div class="th no-mobile">&nbsp;</div>
      <div class="th">Header 1</div>
      <div class="th">Header 2</div>  
    
      <div class="td feature">Feature 1</div>
      <div class="td check colspan">✔</div>
    
    
      <div class="td feature">Feature 2</div>
      <div class="td remove">x</div>
      <div class="td check">✔</div>
    
    
      <div class="td feature">Feature 3</div>
      <div class="td remove">x</div>
      <div class="td remove">x</div> 
    
      <div class="td footer no-mobile">&nbsp;</div>
      <div class="td footer">Footer 1</div>
      <div class="td footer">Footer 2</div>   
  
</div>
Corrl
  • 6,206
  • 1
  • 10
  • 36
0

Instead of using divs you can use the table element along side <tr> and <td> then you can use the colspan="2" attribute to make that one cell occupy two spots:

* {
  box-sizing: border-box;
}

.divTable {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.tHead {
  display: table-header-group;
  color: #fff;
  background: #009fc8;
  font-weight: bold;
  font-size: 25px;
}

.tBody {
  display: table-row-group;
  font-weight: bold;
  font-size: 25px;
}

.tFooter {
  display: table-footer-group;
  color: #fff;
  background: #009fc8;
  font-weight: bold;
  font-size: 25px;
}

.tr {
  display: table-row;
  font-weight: bold;
  font-size: 25px;
}

.td,
.th {
  display: table-cell;
  padding: 10px;
  text-align: center;
  font-size: 22px;
  word-wrap: break-word;
}

.td {
  font-weight: bold;
}

.colspan {
  background: beige;
  text-align: center;
}

.check {
  color: limegreen;
  font-size: 30px;
}

.remove {
  color: red;
  font-size: 30px;
}

.th:first-child,
.td:first-child {
  font-weight: bold;
  color: black;
}

@media screen and (max-width: 768px) {
  .check {
    color: limegreen;
    font-size: 20px;
  }
  .remove {
    color: red;
    font-size: 20px;
  }
  .tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  .td,
  .th {
    display: block;
    width: 33.333333333333%;
    font-size: 20px;
  }
  .th:first-child,
  .td:first-child {
    background: #efefef;
    width: 100%;
  }
  .th:first-child {
    display: none;
  }
  .colspan {
    width: 100%;
  }
}
<table class="divTable">
  <thead class="tHead">
    <tr class="tr">
      <td class="th">&nbsp;</td>
      <td class="th">Header 1</td>
      <td class="th">Header 2</td>
    </tr>
  </thead>
  <tbody class="tBody">
    <tr class="tr newtest">
      <td class="td">Feature 1</td>
      <td colspan="2" class="td check colspan">✔</td>
    </tr>
    <tr class="tr">
      <td class="td">Feature 2</td>
      <td class="td remove">x</td>
      <td class="td check">✔</td>
    </tr>
    <tr class="tr">
      <td class="td">Feature 3</td>
      <td class="td remove">x</td>
      <td class="td remove">x</td>
    </tr>
    <tr class="tr">
      <td class="td">Feature 4</td>
      <td class="td remove">x</td>
      <td class="td remove">x</td>
    </tr>
  </tbody>
  <tfoot class="tFooter">
    <tr class="tr">
      <td class="td">&nbsp;</td>
      <td class="td">Footer 1</td>
      <td class="td">Footer 2</td>
    </tr>
  </tfoot>
</table>
aerial
  • 1,188
  • 3
  • 7
  • 15
  • Thank you. I know but i don't use element.
     –  Nov 06 '21 at 11:12
  • The table/tr/td elements can be styled directly in css, so the redundant classes might be removed – Corrl Nov 06 '21 at 11:25
  • @Corrl I use table now. ok.. How can i best ideal responsive comparison table? Thank you. –  Nov 06 '21 at 11:47