CSS Hyphenation in tables

Continuing the discussion from Use Screen Size or User Agent to detect mobile devices?:

I have my site nice and scalable now, down to about 300px. One of the most challenging things to get to fit on-screen without making horizontal scroll bars was tables. I did manage to squeeze the existing tables in by using media queries to do things like reduce font size and abbreviate some text, for example.
I am now in the process of making a new web page that will contain a table and having trouble making it fit. The problem is long words fixing the min width if the tds. As a possible solution, I have been reading a bit about Hyphens in CSS3, but I have not got them to work as “auto” in tds. The text does not hyphenate, the tables still go wide of the screen.
Does anyone have any tips on making tables scale down or using hyphens?
I have experimented with throwing in a ­ which works, but the new table will contain user generated content, not what I have written myself. One idea was to use PHP to insert a ­ into any word over a given length.

The first post appears incomplete, because I put tags in it.
I can’t see how to edit the post so:-
I am now in the process of making a new web page that will contain a table and having trouble making it fit. The problem is long words fixing the min width if the td’s and making the table go off screen.
As a possible solution I have been reading about hyphens in CSS3, but have not got it to work with “auto”. I did experiment by adding a ­ to a word, and that works. But the problem is that the new table will contain user generated content, rather than text I write myself.
Does anyone have any tips on making tables scale down or using hyphens?
One idea was to use PHP to insert a ­ into words above a given length, but I would prefer auto hyphenate, with that happening before tables exceed their max width.

Hi,

You can break the word but I don’t think any current browser will hyphenate them properly.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.nowrap {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
table {
	width:200px;
	margin:20px;
	border:1px solid #000;
}
.test1 {
	table-layout:fixed;
}
</style>
</head>

<body>
<table class="test1 nowrap">
		<tr>
				<td>thisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatest</td>
		</tr>
</table>
<table class="test2 nowrap">
		<tr>
				<td>thisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatest</td>
		</tr>
</table>
</body>
</html>

If your cells are getting that small that they need hyphenation then you should think about using media queries and creating a linear display instead for smaller screens.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.mytable{
	width:100%;
	margin:0 auto;
	max-width:960px;
	border-collapse:collapse;
}
.mytable td{
	border:1px solid #000;
	padding:10px;
	vertical-align:top;
}
p{margin:0 0 1em}

@media screen and (max-width:601px) {
	table.mobile-optimised {
		word-wrap:break-word;
	}
	table.mobile-optimised thead {
		display:none
	}
	table.mobile-optimised td {
		display:block;
		float:left;/* ie9 and under hack */
		width:100%;
		clear:both;
		background:#f5f5f5;
		padding:10px 5px;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
	}
	table.mobile-optimised tbody, table.mobile-optimised tr {
		display:block
	}
	.mobile-optimised td:before {
		content:attr(data-th);
		display:block;
		font-weight:bold;
		margin:0 0 2px;
		color:#000;
	}
	.mobile-optimised tbody tr {
		border-bottom:1px solid #00c0f3
	}
}
</style>
</head>

<body>
<table class="mytable mobile-optimised" >
		<thead>
				<tr>
						<th scope="col">Name </th>
						<th scope="col">Company</th>
						<th scope="col">Description</th>
				</tr>
		</thead>
		<tbody>
				<tr>
						<td data-th="Name">Paul OB</td>
						<td data-th="Company">Acme Trading</td>
						<td data-th="Description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p></td>
				</tr>
				<tr>
						<td data-th="Name">Fred Flinstone</td>
						<td data-th="Company">Bedrock</td>
						<td data-th="Description"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis lobortis libero.</p></td>
				</tr>
				<tr>
						<td data-th="Name">Paul OB</td>
						<td data-th="Company">Acme Trading</td>
						<td data-th="Description"><p>Lorem ipsum dolor sit amet, consectetur.</p></td>
				</tr>
		</tbody>
</table>
</body>
</html>
1 Like

Thanks Paul
This is strange, I said the hyphenation does not work, but now it does, at least in FF. But then it is probably a different version. When I first tried it, I was on a different computer, it may have had an older version of FF. Just trying it now: In the latest FF it works, even hyphenating when not necessary, which is annoying. In chrome, I can’t get the window narrow enough the force it. And no suprise, IE does not work.
One thing worth mentioning about your first example, for anyone intending on using hyphens. I too, during an experiment tried making up an extra long word by writing a sentence without spaces. This will not hyphenate. As I understand it, it works via a dictionary, so must be used within lang tags so the browser knows which dictionary to use. It then uses the dictionary to choose the best point to break the word. There fore I don’t think it will hyphenate made up words.
I had read that it was not widely supported yet, even worse in mobile browsers, which was the only place I would want to use it.
But browsers do catch up eventually.
I like your second example, I would not have thought of making the td’s blocks to alter the layout. I would have thought it would take two versions of the table.
The table I want to make is 6 cols. Col1 is the team number, which will just be a number, no more than 12, so quite narrow. Col2 is Team name, which could be any length, depending on what the team calls its self. The next 4 cols are the four team members names, again length and max word length unknown. If they all have short names I have no problem.
I may decide to alter the table layout, having each team occupy 2 rows rather than 1. Though I do like your idea, and it is neater using just one row per team.

I’ve done some further tests using very long words, so chrome can’t fit them in. Hyphens don’t work in Chrome or IE. They do work in FF.
I was wrong about made up words, it does hyphenate them. If I write asentencewithoutanyspacesinit, it does hyphenate. In fact its smart enough to spot the real words in it and adds the hyphens where the spaces should be.
Of course with the very long words, the table does not even fit on the full size page (900px). But I don’t expect anyone will use such long words, though you never know.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.