Jump to content

Get Tables To Stick Together Without Seams In The Middle?


hybridgoomba

Recommended Posts

<html><head><title>Contiguous Border check</title><style type="text/css">td {width:100px;height:100px;background-color:gainsboro;border:0px solid black;}</style></head><body><table border="0"><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table></body></html>

Basically, I'm trying to figure out if there's a way to get the cells to stick together without space in between them. Also, I need it to be a way that's compatible with Internet Explorer :) Anyway, thanks for any help you can give me!

Link to comment
Share on other sites

border-collapse: collapse; in your CSS definitions ought to do it.

Link to comment
Share on other sites

margin: 0; Add to the td definition, and if that doesnt work add it to the img one.

Link to comment
Share on other sites

padding! That's what I meant. td padding or img margin to 0, or both!

Link to comment
Share on other sites

You should try it without tables, it's a bad practise to use tables, especially for something like that (Unless these images are actually part of some tabular information).If you want images to stick together seamlessly, you can just do the following:CSS

/* Prevent vertical separation between images */.image img { vertical-align: middle; }

HTML

<div class="image">  <!-- first row -->  <img src="A1" alt="A1">  <img src="A2" alt="A2">  <img src="A3" alt="A3"><br>  <!-- second row --><img src="B1" alt="B1"><img src="B2" alt="B2"><img src="B3" alt="B3"><br>  <!-- third row --><img src="C1" alt="C1"><img src="C2" alt="C2"><img src="C3" alt="C3"></div>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...