Search code examples
csswidthcss-tables

Why is using width:100% to make a table expand relatively to window size creates an undesired space?

I'm trying to create a website that will adjust the size of table elements table cells relative to the size of the window, so that it will always fit inside the window. Here's what I have:

.table {
  display: table;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.tablecell {
  display: table-cell;
}
<div class="table">
  <div class="tablecell">
    <image src="fb.png">
  </div>
  <div class="tablecell">
    <image src="twitter.png">
  </div>
  <div class="tablecell">
    <image src="youtube.png">
  </div>
  <div class="tablecell">
    <image src="apple.png">
  </div>
  <div class="tablecell">
    <image src="email.png">
  </div>
</div>

What's messing this up is the width:100%. Here's a picture of the results. I circled the problem space in blue. Ignore Soulja Boy's face.

Basically I just want this centered correctly so that the YouTube image is in the middle of the page. The space created by using width:100% prevents that, but I want to use this or a similar property so that the table will always fit inside the window.

Solution

  • I think you're just seeing the fact that the images are aligned to the left. Try text-align:center;, like this:

         .table {
         display:table;
         margin-right:auto;
         margin-left:auto;
         width:100%;
     }

     .tablecell {
         display:table-cell;
         text-align:center;
     }

    jsFiddle: http://jsfiddle.net/q73LK/

    As a side note, there is no need to use classes for the cells. You can do this instead:

         .table {
         display:table;
         margin-right:auto;
         margin-left:auto;
         width:100%;
     }

     .table div {
         display:table-cell;
         text-align:center;
     }

    As a second side note, you are missing "alt" attribute on your images. For valid HTML, you need to include the "alt" attribute. Like this:

    <div class="table">
    <div class="tablecell"><image alt="fb" src="fb.png"/></div>
    <div class="tablecell"><image alt="twitter" src="twitter.png"/></div>
    <div class="tablecell"><image alt="youtube" src="youtube.png"/></div>
    <div class="tablecell"><image alt="apple" src="apple.png"/></div>
    <div class="tablecell"><image alt="email" src="email.png"/></div>
</div>