Trying to use width:100% to make a table expand re

Question

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:

<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>

And the following CSS

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

         .tablecell {
         display:table-cell;
         }

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.

Answer 1

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>

Answer 2

The divs are spaced correctly, but the images inside it are not.

Check here: http://jsfiddle.net/CzaK5/

Just add text-align:center; to the .tablecell.

Edit: Ryan Henderson beat me to it.