I have been working on a project at work to create a status board display of important company metrics. Since this will eventually make it to a large LCD display, I am doing everything I can to make sure it is as perfect as possible. Now, I’m no professional designer but one of the things that really bothered me was the tables of information running together and there was no easy way to distinguish the data columns. I wanted to feather (fade) the text at the end of the column before the start of the next.
It seems there is not too much about this on the good old inter-web so I was off to hacking. Like most of my good ideas, they come to me when I stop thinking about them and just allow a moment of quiet. That came tonight at the dog park.
I was really consumed with the idea that I had to address the column that I wanted to feather, when in fact I needed to add the feather to the column I did not want to run into. The picture above shows to table rows, the first does not have the treatment, and the second does. Code to follow…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <html>
<head>
<title>Sample Table Layout</title>
<style>
*, HTML {
padding: 0px;
margin: 0px;
font-family: verdana
font-size: 12px;
background-color: #000000;
color: #FFFFFF;
}
TABLE {
table-layout: fixed;
width: 675px;
}
TD {
white-space: nowrap;
overflow: hidden;
}
TD SPAN {
background: url(feather.png) repeat-y;
background-position: right;
position: absolute;
/* Set these both to the width of your feather image */
margin-left: -20px;
width: 20px;
height: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>The quick brown fox jumped over the log</td>
<td>This is the start of a second column.</td>
<td>Parker</td>
</tr>
<tr>
<td>The quick brown fox jumped over the log</td>
<td><span></span>This is the start of a second column.</td>
<td><span></span>Parker</td>
</tr>
</table>
</body>
</html> |