Help making a td full width

[ninefootone]

I’m struggling to get a table cell to do what I want it to here…

https://www.growingyoungdisciples.co.uk/booking-contend-2019/

This table is generated by a WordPress plugin so I can’t control the HTML. Can anyone help work out how to get the ‘We have a limited number of rooms…’ td to go full width underneath the other tds?

I’ve managed it on the lower widths using media queries but for some reason I just can’t get it to work on desktop.

I’m sure I’m just being thick but nothing I’ve tried works.

Thanks!

[Beverleyh]

I haven’t looked — can’t… on mobile — but making a td into a block element by changing its display property can sometimes be useful.

Are the issues related to you not being able to target the specific td with appropriate selectors, OR that you can target it but can’t get the full width to work as desired?

To attract helpful responses, try mocking up the issue in a reduced CodePen demo – code is easier for us to troubleshoot there (we’re not restricted to the developer toolbar), and doesn’t come with the weight of all the extra code and distractions of a full website. Note that we only need the minimal amount of CSS and HTML to illustrate the problem. We don’t need your whole codebase. You may have to use the developer toolbar and inspect each element in turn to extract all the pertinent styles.

[ninefootone]

Thanks! I’ll copy the code below. What I’m trying to do is make the…

full width so that the three tds above are across the page but this one is full width below them.

Does that make sense? I’ve played with all sorts of display options (including block and table-row) etc. but I’m guessing other CSS is conflicting.

It’s currently got a style of ‘display: table-cell;’ but when I try to overwrite that with ‘display:table-row;’ it doesn’t do anything.

At ‘max-width:767px’ I’ve applied these styles…

.tribe-events-tickets td {
    max-width: 100% !important;
    width: 100% !important;
}   

Which works but that makes all the tds 100% so they all stack on top.

When I try those styles just on the one cell it doesn’t work.

Am I being clear?!

—

Quantity Unlimited available	Sole Occupancy En-suite	£289.00
Quantity Unlimited available	Shared En-suite	£259.00	We have a limited number of shared rooms. We will do our best to accommodate your sharing choice.
Add to cart

[ninefootone]

Sorry, just realised that’s still not helpful. I need to try harder to mock this up on CodePen and try again. I’ll come back!

[ninefootone]

OK, I think I worked it out. Does this enable people to see it…

https://codepen.io/ninefootoneltd/pen/PXYbbW

[Beverleyh]

Hmmm, I think I’d be tempted to hide that cell (display:none;) and then use a pseudo element to reinsert the text where you want it.
Try something like;

#TD_37:before {
  display:block;
  content:'We have a limited number of shared rooms. We will do our best to accommodate your sharing choice.';
}

[ninefootone]

Thanks, maybe I’ll just do that (hide the cell and add in separately).

[Author]

Posts