CSS Table Display Mixture of Fixed and Dynamic Widths

Question

Sorry about the title, I couldn't really think of a way to explain this in a single line.

I am attempting to lay out a "table" with three "cells" in a "column" (quotes are because I want to use CSS to lay this out, not a table). The center cell contains an image, which I want to be centered on, and I want the "cells" on either side of the image to be equal in width.

I am using this as my CSS:

.psuedo-table {
    display: table;
    width: 100%;
    table-layout: fixed;
    border: 0;
    margin-left: auto;
    margin-right: auto;
}

.psuedo-table-row {
    display: table-row;
}

.psuedo-table-column {
    display: table-cell;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

In my HTML, I have the following:

<div class="psuedo-table">
   <div class="psuedo-table-row">
      <div class="psuedo-table-column" style="background-color: #446078;">&nbsp;</div>
      <div class="psuedo-table-column" style="max-width: 100%; white-space: nowrap;">
         <img src="/assets/images/appheader.png" />
      </div>
      <div class="psuedo-table-column" style="background-color: #162a52;">&nbsp;</div>
   </div>
</div>

Unfortunately, this doesn't work, as the three "cells" are the same width, and I need the middle "cell" to expand to the width of the <img> and the cells on the left and right to be equal width.

This is probably simple, but if anyone can help I would appreciate it.

Are the first and last column empty? Or will there be content in them? — GreyRoofPigeon
– GreyRoofPigeon, Commented Sep 26, 2022 at 14:18
For now they will be empty, except for a  . However, I will need to set a background color on the "empty" columns, so I do need them. — Jason
– Jason, Commented Sep 26, 2022 at 14:23

Rok Benko · Accepted Answer · 2022-09-26 14:43:00Z

1

Use flex. See the snippet below.

.psuedo-table-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.psuedo-table-column:nth-child(1),
.psuedo-table-column:nth-child(3) {
  flex: 1;
}

<div class="psuedo-table">
  <div class="psuedo-table-row">
    <div class="psuedo-table-column" style="background-color: #446078;">&nbsp;</div>
    <div class="psuedo-table-column">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Giraffe_Mikumi_National_Park.jpg/800px-Giraffe_Mikumi_National_Park.jpg" width="300" />
    </div>
    <div class="psuedo-table-column" style="background-color: #162a52;">&nbsp;</div>
  </div>
</div>

answered Sep 26, 2022 at 14:43

Rok Benko

23.7k5 gold badges41 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Over a year ago

Okay, that mostly worked, but the flex containers on either side of the image did not stretch to the same height as the container with the image in it. Is there a simple fix for that?

Jason Over a year ago

Looks like align-self: stretch did the trick, thanks.

GreyRoofPigeon · Accepted Answer · 2022-09-26 14:39:30Z

1

CSS flex is an amazing solution for that:

.psuedo-table {
  display: flex;
  width: 100%;
  border: 1px solid red;
}

.psuedo-table > div {
  flex: 1 1 auto;
}
.psuedo-table > div.image {
  flex: 0 1 80%;
}

.psuedo-table > div:first-child {
  background-color: #446078;
}
.psuedo-table > div:last-child {
  background-color: #162a52;
}

<div class="psuedo-table">
  <div>&nbsp;</div>
  <div class="image">
    image
  </div>
  <div>&nbsp;</div>
</div>

answered Sep 26, 2022 at 14:39

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

Collectives™ on Stack Overflow

CSS Table Display Mixture of Fixed and Dynamic Widths

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related