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"> </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"> </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...
CodePudding user response：
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"> </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"> </td>
<td class="td">Footer 1</td>
<td class="td">Footer 2</td>
</tr>
</tfoot>
</table>CodePudding user response：
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"> </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"> </div>
<div class="td footer">Footer 1</div>
<div class="td footer">Footer 2</div>
</div>