Best way to handle long length entries in CSS tables?

HTML & CSS
1

I am working with CSS tables and required to display URLs in few of the columns. As you would imagine some of the URLs are way too long to be included in a table as a result of which cruel re sizing is performed within the table ( two rowed entries, table floats to the right etc. ). What are the best practices to handle entries in such cases? Doing some like “half of the entry and then…” or “half entry here … a little bit here” would be the right way to go or is there some better way around it?

Thanks

2

Depends on the content, you can use white-space:nowrap to prevent wrapping if you want it to blow out the width that you can scroll to.
If it’s just the URL’s that are causing problems then showing the first 20 chars or so should work.

There’s no one right way to handle it, depends on the content and design.

3

Hi,

You can make the content break to a new line using word-wrap:break-word which has good support now and will force the unbroken url to wrap. You need to use it on an inner element rather than a table-cell as some browsers are picky.

Or you could use text-overflow:ellipsis which will truncate the url and apply three dots at the end and is supported in modern browsers.

Or you could do the same as above and then let the url expand on hover so its visible.

Example of all three in a css table:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.outer {
	display:table;
	width:500px;
	border-spacing:20px;
	table-layout:fixed;
	margin:25px;
	border:1px solid red;
}
.cell {
	display:table-cell;
	border:1px solid #000;
	padding:5px;
}
.url{margin:10px 0;padding:2px 4px}
.outer1 .url{word-wrap:break-word}
.outer2 .url{
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;	
}
.outer3 .url:hover{
	overflow:visible;
	background:#fcf;
	display:table;
	position:relative;
	padding:0;
	border-spacing:0;
	border:1px solid red;
}
</style>
</head>

<body>
<div class="outer outer1">
		<div class="cell">
				<p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p>
		</div>
		<div class="cell">
				<p class="url"><a href="#">along url</a></p>
		</div>
		<div class="cell">
				<p class="url"><a href="#">along url</a></p>
		</div>
</div>
<div class="outer outer2">
		<div class="cell">
				<p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p>
		</div>
		<div class="cell">
				<p class="url"><a href="#">along url</a></p>
		</div>
		<div class="cell">
				<p class="url"><a href="#">along url</a></p>
		</div>
</div>
<div class="outer outer2 outer3">
		<div class="cell">
				<p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p>
		</div>
		<div class="cell">
				<p class="url"><a href="#">along url</a></p>
		</div>
		<div class="cell">
				<p class="url"><a href="#">along url</a></p>
		</div>
</div>

</body>
</html>
4

Paul, I think you unearthed a little Firefox bug… :slight_smile:

Modified the text string with underscores so the bleedthru of the ellipsis in the second box would be obvious in the screenshot.

5

Hi Ron,

Which version is that? My Firefox 16.0.2 doesn’t look like that.

What happens if you remove the ellipses on hover.

e.g.


.outer3 .url:hover{
	text-overflow:inherit;
	overflow:visible;
	background:#fcf;
	display:table;
	position:relative;
	padding:0;
	border-spacing:0;
	border:1px solid red;
}
6

The latest and greatest: FF17.0

I had already removed {text-overflow:ellipsis} from .outer3 since it was being applied by .outer2. Didn’t make any difference. Now I’m really curious…!

7

Hi,

Just upgraded to FF17 and it still works for me. Are you on a PC or a mac?

Did you change the code in any way as I can’t reproduce it here.

8

.outer3 .url:hover {z-index:1} fixes it.

9

This is the code that demonstrates the bleedthru on my screen. Restarted FF with addons disabled (Safe Mode); bleedthru still visible. Odd. I would think that .outer3 .url:hover {position:relative} alone should prevent that.

I’m using a PC; WinXPPro, SP3.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?925838-Best-way-to-handle-long-length-entries-in-CSS-tables

Code by Paul O'B
-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
.outer {
    display:table;
    width:500px;
    border-spacing:20px;
    table-layout:fixed;
    margin:25px;
    border:1px solid red;
}
.cell {
    display:table-cell;
    border:1px solid #000;
    padding:5px;
    vertical-align:middle;   /* added */
}
.url {
    margin:10px 0;
    padding:2px 4px;
}
.outer1 .url {
    word-wrap:break-word;
}
.outer2 .url {
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}
.outer3 .url:hover {
    text-overflow:inherit;
    overflow:visible;
    background:#fcf;
    display:table;
    position:relative;
    padding:0;
    border-spacing:0;
    border:1px solid red;
/*    z-index:1;               /* fixes bleedthru of ellipsis */
}
    </style>
</head>

<body>
<div class="outer outer1">
    <div class="cell">
        <p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p>
    </div>
    <div class="cell">
        <p class="url"><a href="#">{word-wrap:break-word;}</a></p>
    </div>
    <div class="cell">
        <p class="url"><a href="#">ashorturl</a></p>
    </div>
</div>
<div class="outer outer2">
    <div class="cell">
        <p class="url"><a href="#">alongurlthatpushesthecellwideifnothandledcorrectly</a></p>
    </div>
    <div class="cell">
        <p class="url"><a href="#">{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}</a></p>
    </div>
    <div class="cell">
        <p class="url"><a href="#">ashorturl</a></p>
    </div>
</div>
<div class="outer outer2 outer3">
    <div class="cell">
        <p class="url"><a href="#">alongurlthatpushesthecellwide___ifnothandledcorrectly</a></p>
    </div>
    <div class="cell">
        <p class="url"><a href="#">{white-space:nowrap;text-overflow:ellipsis;display:table;}</a></p>
    </div>
    <div class="cell">
        <p class="url"><a href="#">ashorturl</a></p>
    </div>
</div>

</body>
</html>
10

Ah ok I’ve just realised what you were saying and its the ellipses of the next element that shows through. I thought your image was showing an ellipsis in place on the current entry as I didn’t have any other long urls in my example.

It looks as though Firefox is creating a stacking context for the ellipses to make sure its on top of the text so as you suggest adding a higher z-index fixes the problem. Well spotted :slight_smile: