Forum Moderators: not2easy
<style type="text/css">
table.datatable {margin: 0; padding: 0; border-collapse: collapse; table-layout: fixed; font-family: tahoma,arial,verdana,sans-serif; clear: both; text-align: left;}
.datatable thead th {padding: 4px 7px; background: #E6E6E6; border-width: 1px 1px 1px 0; border-style: solid; border-top-color: #FFF; border-bottom-color: #C1C1C1; border-right-color: #C1C1C1; font-size: 10px; font-weight: bold; white-space: nowrap; cursor: pointer; cursor: hand;}
.datatable tbody tr {cursor: pointer; cursor: hand;}
.datatable tbody td {padding: 4px; border: 1px solid #E6E6E6; font-size: 10px; vertical-align:top; white-space: nowrap;}
.datatable tbody td.trunc {overflow: hidden; text-overflow: ellipsis;}
</style>
<table class="datatable" cellpadding="0" cellspacing="0" border="0" width="100%">
<thead>
<tr>
<th width="30"></th>
<th width="20"></th>
<th width="100%">Header</th>
<th align="right">Header</th>
<th align="right">Header</th>
<th align="right">Header</th>
<th align="right">Header</th>
<th align="right">Header</th>
<th align="right">Header</th>
<th align="right">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right">1.</td>
<td></td>
<td class="trunc">This column contains potentially long strings that I would like to truncate.</td>
<td align="right">100,000</td>
<td align="right">100,000</td>
<td align="right">100,000</td>
<td align="right">100,000</td>
<td align="right">100,000</td>
<td align="right">100,000</td>
<td align="right">100,000</td>
</tr>
</tbody>
</table>
I'm sorry this has gone unanswered for so long.. I only spotted it and it is indeed a challenge ;)
anyhow.. I think I have a solution? but it involves some hacking for IE, do you mind and/or do you need it to work in all browsers or is it for intranet..
Here's how I see it, you cannot use table-layout: fixed; if you want those last 7 columns to have "auto" width.. but then that invokes IE's auto stretch facilty for the column you want to truncate and you can't get it to crop.
anyhow let me know about which browsers and.or you still need a solution ~ I'm just trying something else too..
Suzy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /></meta>
<title>Untitled</title>
<style type="text/css" media="screen">
table.datatable {
margin: 0; padding: 0;
border-collapse: collapse;
/* table-layout: fixed; */ /* remove this */
width: 100%;
font-family: tahoma,arial,verdana,sans-serif;
clear: both;
text-align: right; /* change this to right as most of table is right aligned */
}.datatable thead th {
padding: 4px 7px;
background: #E6E6E6;
border-width: 1px 1px 1px 0;
border-style: solid;
border-top-color: #FFF;
border-bottom-color: #C1C1C1;
border-right-color: #C1C1C1;
font-size: 10px;
font-weight: bold;
white-space: nowrap;
cursor: pointer;
cursor: hand;
}.datatable tbody tr {cursor: pointer; cursor: hand;}
.datatable tbody td {
padding: 4px; border: 1px solid #E6E6E6;
font-size: 10px;
vertical-align:top;
white-space: nowrap;
}/* set only elements with the trunc class to align left either th or td */
.datatable .trunc {width: 100%; text-align: left;}/* wrap the content in .trunc cells in a div and set the overflow properties on it instead see IE conditional below */
.datatable .trunc div {overflow: hidden; text-overflow: ellipsis; }
</style><!-- now this bit is for IE only, apparently it will register the width of the cell if position: absolute is used that along with the width: 100%; then makes the div size and overflow properly! -->
<!--[if IE]>
<style type="text/css">
.datatable .trunc div {position: absolute; width: 100%; }
</style>
<![endif]-->
</head>
<body>
<table class="datatable" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr><!--
ugly way of forcing the first 2 cells to be the 30px and 20px respectively
I could get the others to do it the right way, but not IE!
you could use spacer gifs.. but remember the cells inbuilt padding for their width
--><th><div style="width: 16px;"><!-- spacer div inside th padding --></div></th>
<th><div style="width: 6px;"><!-- spacer div inside th padding --></div></th><--
add the trunc class to the header as well if you want to control it's left alignment easily
I removed the "td" specificity iin the CSS to cover both th and td
-->
<th class="trunc">Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td></td>
<!--
wrap the content inside these cells in a div, it's actually the div that's being truncated
-->
<td class="trunc"><div>This column contains potentially long strings that I would like to truncate. This column contains potentially long strings that I would like to truncate.</div></td>
<td>100,000</td>
<td>100,000</td>
<td>100,000</td>
<td>100,000</td>
<td>100,000</td>
<td>100,000,000</td>
<td>100,000</td>
</tr>
</tbody>
</table>
</body>
</html>
Hope the comments cover it all, let us know..
re: the spacers on the first 2 x cells, this is to force their column width to what you had specified in original post. I'm not sure if you need this, but I thought this was the easiest way..
I could get FF and Opera to honour the widths properly if I went the <colgroup> and <col> route but then it needed conditional HTML for IE and it still wouldn't force the first 2 columns.. so I figured a good ol' spacer was easier ;)
Suzy
>>track
I've been down all sorts of <table> tracks today, fairly blew out the cobwebs :o
Suzy
