CSS Tables: Fixing the column-width

Question

Note: I would be displaying this page on my SharePoint 2010 site.

I am trying to use CSS table to display and following is my HTML code for it:

<div id="cr">
    <ul class="contact-img">
        <li><img src="Landing page/Contacts/CassWade.png"></li>
        <li>Cass Wade<br/>Project Manager</li>
        <li><img src="Landing page/Contacts/Meredith.png"></li>
        <li>Meredith<br/>HR Head</li>
        <li><img src="Landing page/Contacts/Simon.png"></li>
        <li>Simon<br/>CEO</li>
        <li><img src="Landing page/Contacts/Roger.png"></li>
        <li>Roger<br/>Director</li>
        <li><img src="Landing page/Contacts/Sharyl.png"></li>
        <li>Sharyl<br/>Employee</li>
    </ul>
    <hr/>
</div>

Here is my CSS for the above page:

.contact-img{
    position: relative;
    list-style:none;
    display:table;
    border:none;
    padding:none;
    margin:none;
}

.contact-img li
{
    display:table-cell;
    padding:10px 10px 10px 10px;
    vertical-align:middle;
    margin-left: 25px;
}

I was trying to display these images and its corresponding name in tabular format. The problem with this table is that width of the cell is getting resized as per the content of the cell. However, i want to fix the table cell width (no restrictions on height). Also I want to restrict the number of columns to 4. Any more entries should go to next row.

Any help on how to achieve would be highly appreciated. Thanks in advance.

Vince · Accepted Answer · 2015-09-22T10:19:43.667

My solution uses flexbox CSS3 properties to allow the boxes to be aligned and to wrap if the window gets to small. If you don't want this additional responsive behavior, you can change the max-width for width which in any case limits the number element to 4 per line.

I had to add boxing (div) inside to fix the cell size.

HTML:

<ul class="container">
    <li>
        <div class="inside-container">
            <div><img src="http://dummyimage.com/100x100/000/fff.png&text=1"></div>
            <div class="description"><div>Cass Wade<br/>Project Manager</div></div>
        </div>
    </li>
    <li>
        <div class="inside-container">
            <div><img src="http://dummyimage.com/100x100/000/fff.png&text=2"></div>
            <div class="description"><div>Meredith<br/>HR Head</div></div>
        </div>
    </li>
    <li>
        <div class="inside-container">
            <div><img src="http://dummyimage.com/100x100/000/fff.png&text=3"></div>
            <div class="description"><div>Simon<br/>CEO</div></div>
        </div>
    </li>
    <li>
        <div class="inside-container">
            <div><img src="http://dummyimage.com/100x100/000/fff.png&text=4"></div>
            <div class="description"><div>Roger<br/>Director</div></div>
        </div>
    </li>
    <li>
        <div class="inside-container">
            <div><img src="http://dummyimage.com/100x100/000/fff.png&text=5"></div>
            <div class="description"><div>Sharyl<br/>Employee</div></div>
        </div>
    </li>
</ul>

CSS:

.container {
    list-style: none;
    -webkit-padding-start: 0px; /* fixing Chrome auto style */

    display: flex;
    flex-wrap: wrap;

    max-width: 800px; /* max 4 items of 200px width per line  */
}

/* the content as a bloc */
.inside-container {
    width: 200px;
    height: 100px;
    display: flex; /* makes the description to stay next to the image */
}

.inside-container div {
    width: 100px;
    height: 100px;
}

.inside-container div.description {
    text-align: center;
}

.inside-container div.description div {
    display:table-cell;
    vertical-align: middle;
}

Hope it helps!

edit:

To center your text horizontally you need the container to have text-align: center;.
To center horizontally, you need to put your text in a <div> and add these properties display: table-cell; vertical-align: middle;. It's not as beautiful as I would like, but it works well!

Thank you for solving the major issue. But, I observed that while I this code works, 1 problem still persists. The text adjacent to the image is not aligning (vertically) w.r.t. center of the image. I used various CSS properties to achieve this like vertical-align="middle", text-align="center" and a few other's.... but none of them reflected as expected. Can you please help me solve this minor issue? @VincentPerrin.com — Yash Saraiya, Sep 21 '15 at 20:05
Yes, you didn't mention that point so I let it like this as it looked good and also because you're very close to find the perfect layout with this boxing/approach. So, do you want all the text to be centered in the middle or you want it aligned on the left in a box which is itself centered? — Vince, Sep 21 '15 at 21:40
I would like all my text to be centered. I am able to center align horizontally. But vertical aligning is not reflecting. — Yash Saraiya, Sep 22 '15 at 05:14
I edited the answer. - To center your text horizontally you need the container to have `text-align: center;`. - To center horizontally, you need to put your text in a `
` and add these properties `display: table-cell; vertical-align: middle;`. It's not as beautiful as I would like, but it works well! — Vince, Sep 22 '15 at 10:21
horizontal centering thanks to [another post](http://stackoverflow.com/a/24366868/5259751) — Vince, Sep 22 '15 at 10:29
vertical-align: middle is not having effect on the CSS table — Yash Saraiya, Sep 22 '15 at 10:36
See on [this fiddle](http://jsfiddle.net/vincentperrin_com/2L0gmr6L/), it works fine. Is it because of `=` instead of `:`? — Vince, Sep 22 '15 at 10:43

CSS Tables: Fixing the column-width

1 Answers1