CSS Hyphenation in tables

Mobile
3

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