Left-Align, Full-Width `display: table-cell` With One Row

HTML & CSS
1

I can’t seem to get a full-width row with left alignment when there’s only one row.

Here’s the CSS

.Table{
	display: table;
	width: 100%;
}

.TableHeading {
	display: table-header-group;
}

.TableBody {
	display: table-row-group;
	width: 100%;
}

.TableRow {
	display: table-row;
	width: 100%;
}

.TableRow:nth-child(even){
	background-color: #f0f8ff;
}

.TableHead {
	display: table-cell;
	padding: 3px 10px;
	vertical-align:top;	
}

.TableCell{
	display: table-cell;
	padding: 3px 10px;
	vertical-align:top;
}

.pic {
	width: 300px;
}

.bio{
	text-align: left;
	width: 100%;
}

.TableFoot {
	display: table-footer-group;
}

When there are two rows, seems to render correctly.

2-ROW HTML

<div class="table">
	<div class="tableBody">
		
		<div class="TableRow">
			<div class="TableCell">
				<img class="pic" src="pic.img" alt="" />
			</div>
			<div class="bio" class="TableCell">
				Sam Spade
				<br>
				<a href="link.com" target="_blank">link.com</a>
			</div>
		</div>
		
		<div class="TableRow">
			<div class="TableCell">
				<img class="pic" src="pic.img" alt="" />
			</div>
			<div class="bio" class="TableCell">
				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				<br>
				<a href="link.com" target="_blank">link.com</a>
			</div>
		</div>
		
	</div>
</div>

2-ROW RENDER:

image
image1913×782 167 KB

But when there’s only one row, it renders right-justified. Same CSS, same HTML

1-ROW HTML

<div class="table">
	<div class="tableBody">
		
		<div class="TableRow">
			<div class="TableCell">
				<img class="pic" src="pic.img" alt="" />
			</div>
			<div class="bio" class="TableCell">
				Sam Spade
				<br>
				<a href="link.com" target="_blank">link.com</a>
			</div>
		</div>
		

		
	</div>
</div>

1-ROW RENDER

image
image1908×413 29 KB

2

I am not seeing that issue here:

I have edited a line of HTML to <div class="bio TableCell">, but the text is left aligned without that edit.

Incidentally, I suggest you consider how that would render on a smartphone.

1 Like
3

That fixed it! Two class attributes on the same element seems to have been the trouble, on repl.it.

Thx!

4

i take that back. Not working here:
https://tablecell-2.johnaweiss.repl.co/

I agree about smartphone. For now, just want to solve this css.

5

You have given .TableCell a width of 100%, you can’t have two cells of 100% on a page. That is pushing the first cell as wide as it can, while compressing the second as small as possible.

And what kind of element is mt-container?

2 Likes
6

You helped me solve it again. I used width 100% in an effort to make cell in 2nd column fill the remaining page width.

I just learned i need to Add a display: block; property to my custom mt-container tag to make it block-level like a <div> . Now i can remove that width rule.

7

With display: table-cell any number of cells will natuarally fill the row width.

8

apparently, not if my custom tag doesn’t have display: block

9

All elements are display:inline by default and it’s the UA that sets block (or other values) to certain elements in order to behave the way as generally accepted. Custom elements also will be inline by default unless you set them to something else because the UA knows nothing about them. :slight_smile:

In this page (https://tablecell-2.johnaweiss.repl.co/) you don’t have a full width you have an element that is as wide as its content. If you add another row with different content you will see the difference. That’s because the initial display:table setting has no width and therefore is content width only.

Do you need all those extra divs? You really only need the display:table the display table-row and the display:table-cell divs. You don’t need all the other wrappers.

Do you need the custom <mt- container also? You could apply those data attributes to an existing div. If you do need that custom container then you can get rid of one of the other wrappers. It sounds like mt-container could be the wrapper itself assuming it holds various records (unless that was just a single record holder).

e.g. Assuming my assumptions are correct.

<mt-container mt-records="donors-recs" mt-template="team-member">
  <div class="TableRow">
    <div class="imgwrap TableCell">
      <img class="pic" src="https://bayviewboom.org/data/uploads/braf-badge.jpg" alt="">
    </div>
    <div class="bio TableCell">
      Black Rock Arts In 2011, the BOOM was proud to be awarded a grant from the Black Rock Arts Foundation
      <br>
      <a href="http://blackrockarts.org/projects/grantee-projects/2011-grant-recipients" target="_blank">http://blackrockarts.org/projects/grantee-projects/2011-grant-recipients</a>
    </div>
  </div>

  <div class="TableRow">
    <div class="imgwrap TableCell">
      <img class="pic" src="https://bayviewboom.org/data/uploads/braf-badge.jpg" alt="">
    </div>
    <div class="bio TableCell">
      Black Rock Arts In 2011, the BOOM was proud to be awarded a grant from the Black Rock Arts Foundation
      <br>
      <a href="http://blackrockarts.org/projects/grantee-projects/2011-grant-recipients" target="_blank">http://blackrockarts.org/projects/grantee-projects/2011-grant-recipients</a>
    </div>
  </div>

</mt-container>

mt-container {
  display: table;
  width: 100%;
}
.TableRow {
  display: table-row;
}
.TableRow:nth-child(even) {
  background-color: #f0f8ff;
}
.TableCell {
  display: table-cell;
  padding: 3px 10px;
  vertical-align: top;
}
.pic {
  width: 300px;
}
.imgwrap {
  width: 1%; /* shrink cell*/
}

(Note that Table-rows do not allow margins so other methods would need to be used.)

These days I would use grid to do something like this but it does depend on the use case.

(View on codepen for full width)

1 Like
10

You mean user agent, ie the client browser?

I do want all rows to be full browser width, regardless of content, but i found that setting a width on the table element didn’t force all the right-hand cells to fill the available browser width. Setting mt-container to block did it.

You mean i don’t need the table body nor table row elements? I see you kept the row element in your new HTML. I need the row element for alternating row color. I removed the table and body elements, and i’m still getting desired output. As long as mt-container is block display, i’m getting full width on all the right-hand cells.

Thx for the recode. I need mt-container for some custom JS. It wraps all the records when there are more than one.

I used padding on the cell elements to get an output that i like.

What’s the purpose of your imgwrap?

This works:
https://replit.com/@johnaweiss/tableCell-4

11

Yes that looks better :slight_smile: and does what you want.

Yes sorry the User Agent (basically the browser) supplies all the default styling that you see for the elements that you use. they are all display:inline by default before the UA gets its hands on them :slight_smile:

I was just ensuring the first cell didn’t stretch more than needed. It doesn’t look like its needed in your example.

You need three elements to avoid ambiguity for a full table. They are display:table, display:table-row and display:table-cell.

However you can often get away with less because depending on situation the browser will auto correct and add anonymous elements to complete the correct structure. For example you don’t have a display:table element but because you have a display:table-row the browser assumes that a display:table element is around it. In some cases you can just use display:table-cell and the browser will construct anonymous boxes to make the structure complete. It all depends on the structure but where you have rows and cells then a complete structure is best.

As an example look at the rendered html on this badly coded table.

<table>
  <td>test</td>
</table>

Screen Shot 2023-01-01 at 19.25.54
Screen Shot 2023-01-01 at 19.25.541080×405 43.2 KB

If you look in the devtools panel on the right you can see what the browser has decided it should look like. It has added a tbody and a tr to make the table complete. In your css table version you won;t see those elements but the behaviour will be similar.

in your case it would have made sense to make the mt-container display:table (instead of block) and 100% wide. It works as it is because the browser inserts an anonymous display:table-element after the mt-container so everything is fine. There is no need to change unless you wanted to change some of the table properties such as the table-layout algorithm or the border-spacing properties etc. You can’t do that on your example because the table element is not there for us to target because it is anonymous.

1 Like