Skip to main content
D
default0vaokg78cv42
Inspiring
June 29, 2022
Question

CSS responsive table override

  • June 29, 2022
  • 2 replies
  • 1528 views

I found this amazing CSS code class for a responsive table. I love it. The problem is that the media query for the mobile screen overrides other table classes I created. I tried to name the table something else, to avoid the problem. I named it ".table-lead-sheets". The first section workd perfectly, there is no override. The second section with the media query overrides the other table classes. Please advise on any suggestions.  I have the code below. It is a great asset, if I could only figure out that one bug.

 
/* 
Generic Styling, for Desktops/Laptops 
*/
.table-lead-sheets { 
  width: 60%; 
  border-collapse: collapse; 
font: normal 1.8em;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
margin-left: auto; 
  margin-right: auto;
max-width: 600px;
padding-left: 20px;
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: center; 
}
 
 
@media 
only screen and (max-width: 760px)
 {
 
/* Force table to not be like tables anymore */
.table-lead-sheets, thead, tbody, th, td, tr { 
display: block; 
}
 
/* Hide table headers (but not display: none;, for accessibility) */
thead tr { 
position: absolute;
top: -9999px;
left: -9999px;
}
 
tr { border: 1px solid #ccc; }
 
td { 
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #eee; 
position: relative;
padding-left: 50%; 
}
 
td:before { 
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%; 
padding-right: 10px; 
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "Model"; }
td:nth-of-type(2):before { content: "Weight"; }
td:nth-of-type(3):before { content: "Size"; }
td:nth-of-type(4):before { content: "Thickness"; }
}

 

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    June 29, 2022

    If you must use tables to present spreadsheets or charts, don't use absolute positioning hacks.

     

    On the off chance you're using Bootstrap, use responsive & striped classes.  No added CSS required.

     

     

    <table class="table caption-top responsive-table table-striped">
  <caption>Bootstrap Responsive Table (Striped)</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

     

    Optionally, you can change bg-colors with contextual classes.

    https://getbootstrap.com/docs/5.0/content/tables/#responsive-tables

     

    Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      June 29, 2022
      quote
      @Nancy OShea wrote:

      If you must use tables to present spreadsheets or charts, don't use absolute positioning hacks.

       

       

      The OP is obviously using a solution which labels the information vertically on small screens, not just deploying a simple table. Whether or not the solution is a good one or not is debatable. I try and avoid using tables like the plague and if and when its a necessity I don't know if I would have the desire to jump through hoops to make them fully responsible, maybe, quite possibly yes if I was doing me job properly, its not something I need to consider these days.

      D
      default0vaokg78cv42Author
      Inspiring
      June 29, 2022

      Why is absoulte positioning bad? 

      Thanks for the bootstrap table code, it looks interesting. I have also been experimenting with bootstap 3 column grids. 

      O
      osgood_
      Legend
      June 29, 2022

      You would need to insert the table class infront of the td, th, tr. That would then target ONLY the td, th and tr in a table with the class name .table-lead-sheets - see if that helps.

       

      .table-lead-sheets tr:nth-of-type(odd) { 

        background: #eee; 
      }
      .table-lead-sheets th { 
        background: #333; 
        color: white; 
        font-weight: bold; 
      }
      .table-lead-sheets td, .table-lead-sheets th { 
        padding: 6px; 
        border: 1px solid #ccc; 
        text-align: center; 
      }
       
       
      if you just use:
       
      td {
      blah: blah;
      }
       
      th {
      blah: blah;
      }
       
      tr {
      blah: blah;
      }
       
      that targets ALL the td and th elements in ALL tables
        D
        default0vaokg78cv42Author
        Inspiring
        June 29, 2022

        Thanks, that worked well. The answers I saw in stackoverflow were confiusing, and did not work. One issue with your solution was that the hidden headers were suddenly exposed. I was able to hide them by leaving one of the tr tags alone and not naming it. Strange. I hope that doesn't cause any future inheritance problems. The other table looked fine though. CSS is not always logical. 

         
        @media 
        only screen and (max-width: 760px)
         {
         
        /* Force table to not be like tables anymore */
        .table-lead-sheets,.table-lead-sheets thead, .table-lead-sheets tbody, .table-lead-sheets th, .table-lead-sheets td, .table-lead-sheets tr { 
        display: block; 
        }
         
        /* Hide table headers (but not display: none;, for accessibility) */
        .table-lead-sheets thead  tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
        }
         
        .table-lead-sheets tr { border: 1px solid #ccc; }
         
        .table-lead-sheets td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        }
         
        .table-lead-sheets td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        }
         
        /*
        Label the data*/
         
        .table-lead-sheets td:nth-of-type(1):before { content: "Model"; }
        .table-lead-sheets td:nth-of-type(2):before { content: "Weight"; }
        .table-lead-sheets td:nth-of-type(3):before { content: "Size"; }
        .table-lead-sheets td:nth-of-type(4):before { content: "Thickness"; }
         
        }

         

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices