How do you modify the colspan property when hiding columns via CSS?

Question

I am trying to implement "the unseen column" responsive table technique by assigning a class to a specific column that I can hide if the browser is too narrow.

Truncated dummy html example:

<!doctype html>
<html>
  <head>
    <style>
      table {
          width:100%;
          background-color:#000;
          border-spacing: 1px;
      }

      table tr {
          background-color:#fff;
      }

      table tr:nth-child(2n+1) {
          background-color: #ccc;
      }

      table tr.Title 
      {
        color:#fff;
        background-color:#0e228c;

      }

      table tr.ColumnHeadings
      {
        background-color:#e4e0d4;

      }

      @media only screen and (max-width: 1024px) {
          .VolumeCell {display:none;} 
      }
    </style>
  </head>
  <body>
    <table>
      <tr class="Title">
        <th colspan="6">Stock Prices</th>
      </tr>
      <tr class="ColumnHeadings">
        <th>Code</th>
        <th>Company</th>
        <th>Price</th>
        <th>Change</th>
        <th>Change %</th>
        <th class="VolumeCell">Volume</th>
      </tr>
      <tr>
        <td>AAC</td>
        <td>Austrailian Agricultural Company Ltd</td>
        <td>$1.39</td>
        <td>-0.01 </td>
        <td>-0.36%</td>
        <td class="VolumeCell">9,395</td>
      </tr>
      <tr>
        <td>AAD</td>
        <td>Ardent Liesure Grp.</td>
        <td>$1.15</td>
        <td>+0.02 </td>
        <td>1.32%</td>
        <td class="VolumeCell">56,431</td>
      </tr>
      <tr>
        <td>AAX</td>
        <td>Ausenco Ltd.</td>
        <td>$4.00</td>
        <td>-0.04 </td>
        <td>-.99%</td>
        <td class="VolumeCell">90,641</td>
      </tr>
    </table>
  </body>
</html>

This is all fine and dandy, except there is a single pixel border or space remaining on the far right of the table in some browsers, specifically Chrome 26. I've tried tweaking the border-collapse and border on many of the table elements in the media query. I've also tried setting negative margins to account for the pixel. Being the anal-retentive person I am, I can't let it go, but I would prefer not to use jQuery to solve this problem.

So how can I account for the missing column?

score 5 · Accepted Answer · edited Oct 30 '20 at 09:39

You can't modify the colspan attribute from CSS. If you really needed to change the value, you would have to modify the DOM.

However, instead of the "Title" class that you are using to encompass all the columns, you can use a <caption> element which does exactly what you want. It effectively is the title of the table. See http://www.quackit.com/html_5/tags/html_caption_tag.cfm

Here is a modified version of your markup that uses the caption element. When resized in Chrome it behaves how you would like.

table {
              width:100%;
              background-color:#000;
              border-spacing: 1px;
          }
    
          table tr {
              background-color:#fff;
          }
    
          table tr:nth-child(2n+1) {
              background-color: #ccc;
          }
          
          caption
          {
            color:#fff;
            background-color:#0e228c;
            
          }
          
          table tr.ColumnHeadings
          {
            background-color:#e4e0d4;
            
          }
    
          @media screen and (max-width: 1024px) {
              .VolumeCell {display:none;} 
          }

        <table>
          <caption>
            Stock Prices
          </caption>
          <tr class="ColumnHeadings">
            <th>Code</th>
            <th>Company</th>
            <th>Price</th>
            <th>Change</th>
            <th>Change %</th>
            <th class="VolumeCell">Volume</th>
          </tr>
          <tr>
            <td>AAC</td>
            <td>Austrailian Agricultural Company Ltd</td>
            <td>$1.39</td>
            <td>-0.01 </td>
            <td>-0.36%</td>
            <td class="VolumeCell">9,395</td>
          </tr>
          <tr>
            <td>AAD</td>
            <td>Ardent Liesure Grp.</td>
            <td>$1.15</td>
            <td>+0.02 </td>
            <td>1.32%</td>
            <td class="VolumeCell">56,431</td>
          </tr>
          <tr>
            <td>AAX</td>
            <td>Ausenco Ltd.</td>
            <td>$4.00</td>
            <td>-0.04 </td>
            <td>-.99%</td>
            <td class="VolumeCell">90,641</td>
          </tr>
        </table>

score 4 · Answer 2 · edited Jun 06 '18 at 20:25

4

In case one has similar problem, but for colspan not expanding the whole row, in which case caption makes no sense.

A simple trick is to not hide desired columns with display: none;, but rather do

width: 0px;

This way column will still exist for colspan, all though not visible.

edited Jun 06 '18 at 20:25

HoldOffHunger

18,769
10
104
133

answered Apr 10 '17 at 10:23

ruuter

2,453
2
30
44

@HoldOffHunger After a zero length value, the unit identifier is optional. `width: 0;` is perfectly fine and more readable IMO. See: https://stackoverflow.com/a/5359241/1296104 – ruuter Jun 07 '18 at 20:39
Wow, so beautiful and simple, use saved my day, thanks! – Feb 05 '19 at 17:31
You may also need to set `border-width: 0;` and `overflow: hidden;` – Dai Oct 30 '20 at 09:40

How do you modify the colspan property when hiding columns via CSS?

2 Answers2