Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Jeanie Herold
Jeanie Herold
15,555 Points

HTML Tables Course

I am curious. I just finished HTML Tables Course: I started to play with the css and thought for sure changing the max-width: 960px; to max-width: 80%; would make the table responsive at mobile size -->

table {
  max-width: 80%;
  margin: 10px auto;
}

But it didn't. Which table element should be targeted to make the table responsive? Or should the table be placed inside a <div> and then set the div to a width of 80% for best practice syntax?

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Your style as shown might make a table responsive, depending on the contents. If it were filled with text that can wrap, it would indeed cause the columns to narrow as the window became smaller.

On the other hand, it it is filled with objects of fixed size (images, perhaps), it may seem that nothing is happening. A table cannot become smaller than its contents. In that case, you would have to scale the images themselves, and the table would happily shrink around them without requiring any explicit styling itself.

Jeanie Herold
Jeanie Herold
15,555 Points

Hi Steven,

It was just text in the cells (no object otherwise) but at mobile size it stopped being responsive. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Employee Information</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>

    <table>
      <caption>Employee Information</caption>
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
          <th scope="col">Job role</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="3">Data is updated every 15 minutes</td>
        </tr>
      </tfoot>
      <tbody>
         <tr>
          <th scope="row">Jeanie Herold</th>
          <td>jeanie@heroldwebdesign.com</td>
          <td>Web Designer</td>
        </tr>
        <tr>
          <th scope="row">Andrew Chalkley</th>
          <td>andrew@heroldwebdesign.com</td>
          <td>Front-end Developer</td>
        </tr>
        <tr>
          <th scope="row">Dave McFarland</th>
          <td>dave@heroldwebdesign.com</td>
          <td>Front-end Developer</td>
        </tr>
        <tr>
          <th scope="row">Guil Hernandezx</th>
          <td>guil@heroldwebdesign.com</td>
          <td>Web Designer</td>
        </tr>
      </tbody>
    </table>    

  </body>
</html>

I cant see anything in the css file that would be overwriting or blocking the code at mobile size. This was project files from the HTML Tables course. So it is not important that I make this responsive. BUT it is bugging me that I cannot see what is keeping it from being responsive at mobile. Unless the padding and margins in pixels are too high for mobile to stay within the 80%. It was curious. I will play with that some more to test it. Thank you for replying

body {
  font-family: 'Nunito', sans-serif;
  color: #384047;
}

table {
  max-width: 80%;
  margin: 10px auto;
}

caption {
  font-size: 1.6em;
  font-weight: 400;
  padding: 10px 0;
}

thead th {
  font-weight: 400;
  background: #8a97a0;
  color: #FFF;
}

tr {
  background: #f4f7f8;
  border-bottom: 1px solid #FFF;
  margin-bottom: 5px;
}

tr:nth-child(even) {
  background: #e8eeef;
}

th, td {
  text-align: left;
  padding: 20px;
  font-weight: 300;
}

tfoot tr {
  background: none;
}

tfoot td {
  padding: 10px 2px;
  font-size: 0.8em;
  font-style: italic;
  color: #8a97a0;
}
Mitchell Fargher
Mitchell Fargher
11,634 Points
Mitchell Fargher
Mitchell Fargher
11,634 Points

You can do some pretty neat things with flexbox using flex-wrap to make tables responsive as well.

Jeanie Herold
Jeanie Herold
15,555 Points

Hi Mitchell, I am not yet familiar with flexbox. I will look that up.

Thank you for the reply!