Skip to main content

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<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;
}
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th class="cutandpaste">SKU</th>
<th>Count</th>
</tr>
<tr>
<td><a href="#">Shoes</a></td>
<td class="cutandpaste">192</td>
<td>15</td>
</tr>
<tr>
<td><a href="#">Bikes</a></td>
<td class="cutandpaste">257</td>
<td>10</td>
</tr>
</table>
</body>
</html>
Here's what it looks like in my browser vs. what it looks like when you copy-and-paste it into an editor:


Comments