how to fix the width of a table containing wider image?

to diaplay part of an image.

[mms19]

I got a table as

<table>
<tr>
<td>
<img src="pic1" width="100" height="10">
<img src="pic2" width="200" height="10">
</td>
</tr>
</table>

Now I want to fix the width of the table to say 80px such that it only displays the left 80% of the pic1 image. I cannot make it by setting the table width as

<table width="80">

Is there any way to do it in CSS?

Thank you.

[DrDoc]

table {
width: 80px;
overflow: hidden;
}

[mms19]

I just tried it but it does not work. The whole pictures are still displayed.

Am I doing something wrong?

[oodlum]

Use the image as the table or cell background.

[bruhaha]

You're not doing anything wrong. DrDoc's answer is in the right direction, but trying to set the styles for the "table" element (or "tr" or "td", for that matter) will not work.

Instead, you may place the table within a "div" and give that the style markup (either inline, or by creating a class in your stylesheet).

Now there are a couple of drawbacks to this approach. It will set the width of the whole table to 80px. With padding included, the image will actually display less --though you can fix this by adjusting the width you assign. But if you give the table a border, none will appear on the right side.

An alternative is to place a div with these styles inside the cell, like this:

<table>
<tr>
<td><div style="width:80px;overflow:hidden;">
<img src="pic1" width="100" height="10">
<img src="pic2" width="200" height="10">
</div></td>
</tr>
</table>

[DrDoc]

...or just skip the table entirely ;)

[bruhaha]

...or just skip the table entirely

Amen. I've been assuming there is will be more to the table. But if it's as simple as the form we've been discussing, it serves no real purpose.