Various widths of table with same class?

HTML & CSS
1

I have several pages with tables that covers entire page width (100%). On each page, there are 5-6 of them, stacked on top of each other.

Here and there, I need to add images in the way that I float them to the left of the tables.

But as the width of the tables are set to 100%, they’ll be pushed to the right as much as the width of the image and will end up outside the page.

If I instead use “max-width” 100%, the tables will adjust to the real estate available to the right of the images.
But as there are more tables at the page (that don’t have any image floated to the left), these will shrink as there are no actual width set for them.

Is there any way to make the tables with images beside them adjust to the space available AND have the tables without images beside stretch out to 100%?

Something that tells the tables that “if you have an image floated to the left of you, you should shrink to the space available. If you don’t have any image beside you, you should cover entire page width.”

Hope this made sense…

2

Hi,

I think the only way you can do this without changing the table display properties is to add an extra html element where necessary.

Here’s the basic demo.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
table {
	width:100%;
	background:red;
	height:200px;
	margin:0 0 20px;
}
img {
	float:left;
	margin:0 10px 0 0;
}
.table-wrapper {
	overflow:hidden;
}
</style>
</head>

<body>
<img src="http://placehold.it/150x150">
<div class="table-wrapper">
		<table>
				<tr>
						<td>Test</td>
				</tr>
		</table>
</div>
<table>
		<tr>
				<td>Test</td>
		</tr>
</table>
<table>
		<tr>
				<td>Test</td>
		</tr>
</table>

<img src="http://placehold.it/250x150">
<div class="table-wrapper">
		<table>
				<tr>
						<td>Test</td>
				</tr>
		</table>
</div>


</body>
</html>

Assuming of course that that is what you meant :smile:

1 Like
3

Yes, that’s what I meant. And your solution is spot on!

I actually found some hints like this when searching the web. But thought the “overflow:hidden” did just that: hided the part of the table that exceeded the container. In my mind, I imagined a table where a large part of it was invisible.

Didn’t know the attribute actually stopped content from evading the container as well.

Thanks a million!

4

Yes, overflow other than visible creates a new ‘block formatting context’ and in this context the element will not slide it’s background or margins under previous floats. Effectively it creates a rectangular box to the side of the float. (Elements that create new block formatting contexts will also automatically contain child floats.)

There are other properties that create new block formatting contexts but overflow is one of the most useful when you don’t need visible overflow.

5

What’s wrong with doing something like img+table{} which will only grab direct tables with an image before it?

6

That won’t work as you can’t have a 100% wide table next to a floated image because the table will be too wide to fit.

For the table to stretch to 100% of the remainder of the screen requires the intermediate element so that the table can base its 100% width on that smaller element.

It’s ok if you let the table shrink to content size (auto width) but that’s not what was wanted.:slight_smile:

7

This depends on the layout though. If all his images are the same, e.g. 150px, then couldn’t the OP simply calc(100%-150px)?

http://codepen.io/ryanreese09/pen/jPKZjo

We don’t know enough to rule this out.

8

Stop bitching.
PaulOB’s solution works like charm.
Case closed.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.