Html – How to modify the colspan property when hiding columns via CSS

csshtmlhtml-tablemedia-queries

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?

Best Answer

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>

Related Topic