1

I'm trying to find a way, using CSS, to change the colspan on the base of a responsive table such as that found on a shopping cart. So what happens is, at lower resolutions, certain columns are trimmed off to preserve horizontal space. This leaves the col spanned rows "hanging" over the end, essentially preserving the original width, causing overflow situations. As we know, horizontal overflows on mobiles is a pain.

So is there a way, using CSS, to change the colspan of table rows? I already know how to do this with JS, using a listener frame, but I'm curious if there was some kinda CSS hack I could do instead. This would help to prevent a bit of FOUC.

Here is a fiddle example: https://jsfiddle.net/Dhaupin/5pv5qmru/3/

Here is the example table structure:

<table>
<thead>
  <tr>
    <td class="image">Image</td>
    <td>Name</td>
    <td>Model</td>
    <td>Qty</td>
    <td>Price</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="image">-- img --</td>
    <td>This Red Hat</td>
    <td>HAT-RED-2384</td>
    <td>2</td>
    <td>$13.22</td>
  </tr>
  <tr>
    <td class="total right" colspan="4">Subtotal:</td>
    <td>$26.44</td>
  </tr>
  <tr>
    <td class="total right" colspan="4">Shipping:</td>
    <td>$6.65</td>
  </tr>
  <tr>
    <td class="total right" colspan="4">Total:</td>
    <td>$33.10</td>
  </tr>
</tbody>
</table>

And some default CSS, hiding the "image" column at 640px or less:

table {
  border-collapse: collapse;
}
td {
  border: 1px solid grey;
  padding: 4px;
  width: 18%;
}
.right {
  text-align: right;
}

@media (max-width: 640px) {
  td.image {
    display: none;
    /* some kinda css hack here to "hide" without "hiding? */
  }
  td.total {
    /* colspan 3 here? how do we make it span cleanly? */
  }
}

Here is what full width looks like:

enter image description here

Here is what it looks like on smaller res, notice the overflow of colspan on bottom:

enter image description here

dhaupin
  • 1,613
  • 2
  • 21
  • 24
  • Are you open to using divs instead of table? –  Nov 10 '16 at 21:38
  • @AllDani.com I am down with divs, makes sense to use them for rows on the bottom for sure. However...this specific table of concern is part of a 3rd party module/app. Divs may be the best bet, submit a fix to the dev, but in the meantime I don't wanna update files that may be overwritten by an update. Honestly, I asked this because I'm quite taken back that CSS does not have a column-span property to mitigate this. Kinda mind boggling IMO. – dhaupin Nov 10 '16 at 21:45
  • Thing is, html table are old. If you want the best, use the best. –  Nov 10 '16 at 21:46
  • Should I post a div based answer? You probably know how to do that, but just in case.. –  Nov 10 '16 at 21:46
  • @AllDani.com sure if you would like. I don't know if i can accept it as answered unless it's a table CSS hack though :) – dhaupin Nov 10 '16 at 21:57
  • Oh well. I'll try. –  Nov 10 '16 at 21:58

2 Answers2

0

I know this is not the best solution but css does not allow to change the native html table attribute value.

More information can be fount here: HTML colspan in CSS

For better solution you can use js/ jquery and change attribute colspan for td.total

@media (max-width: 480px) {
  td.image {
    position: absolute;
    left: -99999px;
  }
}
Community
  • 1
  • 1
Sagar
  • 538
  • 3
  • 9
0

This solution doesn't CHANGE the colspans, but corrects colspan issues by adding cells (with different colspans) that show up in place of the hidden ones.

Here's your table with bootstrap styling. Note the opposing use of d-none and d-md-table-cell on the total header columns.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<table class="table table-bordered">
    <thead>
        <tr>
            <td class="image d-none d-md-table-cell">Image</td>
            <td>Name</td>
            <td>Model</td>
            <td>Qty</td>
            <td>Price</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="image d-none d-md-table-cell">-- img --</td>
            <td>This Red Hat</td>
            <td>HAT-RED-2384</td>
            <td>2</td>
            <td>$13.22</td>
        </tr> 
        <tr>
            <td class="total text-right d-none d-md-table-cell" colspan="4">Subtotal:</td>
            <td class="total text-right d-table-cell d-md-none" colspan="3">Subtotal:</td>
            <td>$26.44</td>
        </tr>
        <tr>
            <td class="total text-right d-none d-md-table-cell" colspan="4">Shipping:</td>
            <td class="total text-right d-table-cell d-md-none" colspan="3">Shipping:</td>
            <td>$6.65</td>
        </tr>
        <tr>
            <td class="total text-right d-none d-md-table-cell" colspan="4">Total:</td>
            <td class="total text-right d-table-cell d-md-none" colspan="3">Total:</td>
            <td>$33.10</td>
        </tr>
    </tbody>
</table>
mmarlow
  • 246
  • 3
  • 11