Friday, January 26, 2007

CSS: Hacking Copy-and-Paste

If you copy-and-paste the contents of an HTML table into a text editor or Excel, it "does the right thing". This is a useful feature. What happens, though, if you want a column to appear in the copy-and-pasted copy, but not actually take up space on the screen? For instance, sometimes you might want to output the URL for a link in addition to the anchor text, and you want the URL for the link in a separate column. Sure, you can generate a report in CSV format, but the following trick can be bolted onto existing tables. Here's the HTML and CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<title>Hacking Cut-and-Paste</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<style type="text/css">
* The "cutandpaste" class makes things invisible, unless you cut-and-paste
* or print them.
@media screen {
.cutandpaste {
display: none;
<th class="cutandpaste">SKU</th>
<td><a href="#">Shoes</a></td>
<td class="cutandpaste">192</td>
<td><a href="#">Bikes</a></td>
<td class="cutandpaste">257</td>
Here's what it looks like in my browser vs. what it looks like when you copy-and-paste it into an editor:

No comments: