Forum Moderators: not2easy
display: inline-block;<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
table {
width: 100%;
border-collapse: collapse;
border: 0;
table-layout: fixed;
}
td {border: 1px solid #000; padding: 5px; vertical-align: top;}
td ul {
display: inline-block;
vertical-align: top;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #f00;
width: 32%;
}
td ul {*display: inline;} /* parse hack version, or see conditional below */
</style>
<!--[if lt IE 8]>
<style type="text/css" media="screen">
td ul {
display: inline; /* this is to make inline-block work on block elements versions <IE8 */
margin-right: 3px; /* and this is to simulate the natural 3px spacing that happens between inline-block elements */
}
</style>
<![endif]-->
</head>
<body>
<table summary="" cellspacing="0">
<tr>
<td>one</td>
<td>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul><li>one</li><li>two</li><li>three</li><li>four</li></ul>
<ul><li>one</li><li>two</li></ul>
</td>
<td>three</td>
</tr>
</table>
</body>
</html>
Is there a way I can get rid of that 3 pixel right side margin on my columns? margin: 0px doesn't seem to have any effect on it.
Seems like I'm getting a little bit of odd top spacing too. Any thoughts on all the spacing?
AAAAAAND one more question. Is there a way to auto-balance the columns? That is, have the column set fill the whole width, but have each column width auto size based on content? The same way a table would, if you specified the table width as 100%, but no cell widths?
