ssp · December 14, 2015 02:19
diff --git a/table-line-breaks.html b/table-line-breaks.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>table line breaking tests</title>
 	<style>
 		body { word-wrap: break-word;}
 		table { background: rgba(200, 200, 250, 0.7); }
 		body>div { background: red; width: 200px;}
 		td, .cell { border: 1px solid green; }

 		.colgroups table { table-layout: fixed; }
 		.css td  { width: 50%; }
 		.divs1 td div { width: 100px; }
 		.divs2 td div { width: 50%; }
 		.break-word table { word-break: break-all; }
 		.break-word td div { width: 50%; }
 		.overflow { overflow: auto; }
 	</style>
 </head>
 <body>
 	<h1>Table line breaking tests</h1>

 	<p>
 		The examples on this page test line breaking in tables.
 	</p>
 	<p>
 		We try to figure out how to achieve a specific width of a column even when the words inside the column are too long to fit in there. This only seems to be possible for pixel-widths, not for more flexible percentage widths.
 	</p>
 	<p>
 		The example setup is a <span style="background: red">container div of 200px</span> containing a <span style="background: rgba(200, 200, 250, 0.7);">table</span> with a single row containing two <span class="cell">cells</span>.
 	</p>

 	<h2>Colgroups</h2>
 	<p>
 		We set up columns using colgroups of width 100px.
 	</p>
 	<div class="colgroups">
 		<table>
 			<colgroup>
 				<col span="1" style="width: 100px">
 				<col span="1" style="width: 100px">
 			</colgroup>
 			<tbody>
 				<tr>
 					<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
 					<td>bbb</td>
 				</tr>
 			</tbody>
 		</table>
 	</div>

 	<h2>CSS width</h2>
 	<p>
 		Each td is set to be 50% wide using CSS.
 	</p>
 	<div class="css">
 		<table>
 			<tbody>
 				<tr>
 					<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
 					<td>bbb</td>
 				</tr>
 			</tbody>
 		</table>
 	</div>

 	<h2>Extra divs 100px</h2>
 	<p>
 		Each cell contains a div set to be 100px wide.
 	</p>
 	<div class="divs1">
 		<table>
 			<tbody>
 				<tr>
 					<td>
 						<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
 					</td>
 					<td>
 						<div>bbb</div>
 					</td>
 				</tr>
 			</tbody>
 		</table>
 	</div>

 	<h2>Extra divs 50%</h2>
 	<p>
 		Each cell contains a div set to be 50% wide.
 	</p>
 	<div class="divs2">
 		<table>
 			<tbody>
 				<tr>
 					<td>
 						<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
 					</td>
 					<td>
 						<div>bbb</div>
 					</td>
 				</tr>
 			</tbody>
 		</table>
 	</div>

 	<h2>Break Word</h2>
 	<p>
 		Each cell contains a div set to be 50% wide and word-break:break-all.
 	</p>
 	<div class="break-word">
 		<table>
 			<tbody>
 				<tr>
 					<td>
 						<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
 					</td>
 					<td>
 						<div>bbb</div>
 					</td>
 				</tr>
 			</tbody>
 		</table>
 	</div>

 	<h2>Overflow scroll</h2>
 	<p>
 		The containing div has a fixed width and is set to scroll on overflow.
 	</p>
 	<div class="overflow">
 		<table>
 			<tbody>
 				<tr>
 					<td>
 						<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
 					</td>
 					<td>
 						<div>bbb</div>
 					</td>
 				</tr>
 			</tbody>
 		</table>
 	</div>


 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>table line breaking tests</title>
	<style>
	body { word-wrap: break-word;}
	table { background: rgba(200, 200, 250, 0.7); }
	body>div { background: red; width: 200px;}
	td, .cell { border: 1px solid green; }

	.colgroups table { table-layout: fixed; }
	.css td { width: 50%; }
	.divs1 td div { width: 100px; }
	.divs2 td div { width: 50%; }
	.break-word table { word-break: break-all; }
	.break-word td div { width: 50%; }
	.overflow { overflow: auto; }
	</style>
	</head>
	<body>
	<h1>Table line breaking tests</h1>

	<p>
	The examples on this page test line breaking in tables.
	</p>
	<p>
	We try to figure out how to achieve a specific width of a column even when the words inside the column are too long to fit in there. This only seems to be possible for pixel-widths, not for more flexible percentage widths.
	</p>
	<p>
	The example setup is a <span style="background: red">container div of 200px</span> containing a <span style="background: rgba(200, 200, 250, 0.7);">table</span> with a single row containing two <span class="cell">cells</span>.
	</p>

	<h2>Colgroups</h2>
	<p>
	We set up columns using colgroups of width 100px.
	</p>
	<div class="colgroups">
	<table>
	<colgroup>
	<col span="1" style="width: 100px">
	<col span="1" style="width: 100px">
	</colgroup>
	<tbody>
	<tr>
	<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
	<td>bbb</td>
	</tr>
	</tbody>
	</table>
	</div>

	<h2>CSS width</h2>
	<p>
	Each td is set to be 50% wide using CSS.
	</p>
	<div class="css">
	<table>
	<tbody>
	<tr>
	<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
	<td>bbb</td>
	</tr>
	</tbody>
	</table>
	</div>

	<h2>Extra divs 100px</h2>
	<p>
	Each cell contains a div set to be 100px wide.
	</p>
	<div class="divs1">
	<table>
	<tbody>
	<tr>
	<td>
	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
	</td>
	<td>
	<div>bbb</div>
	</td>
	</tr>
	</tbody>
	</table>
	</div>

	<h2>Extra divs 50%</h2>
	<p>
	Each cell contains a div set to be 50% wide.
	</p>
	<div class="divs2">
	<table>
	<tbody>
	<tr>
	<td>
	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
	</td>
	<td>
	<div>bbb</div>
	</td>
	</tr>
	</tbody>
	</table>
	</div>

	<h2>Break Word</h2>
	<p>
	Each cell contains a div set to be 50% wide and word-break:break-all.
	</p>
	<div class="break-word">
	<table>
	<tbody>
	<tr>
	<td>
	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
	</td>
	<td>
	<div>bbb</div>
	</td>
	</tr>
	</tbody>
	</table>
	</div>

	<h2>Overflow scroll</h2>
	<p>
	The containing div has a fixed width and is set to scroll on overflow.
	</p>
	<div class="overflow">
	<table>
	<tbody>
	<tr>
	<td>
	<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
	</td>
	<td>
	<div>bbb</div>
	</td>
	</tr>
	</tbody>
	</table>
	</div>


	</body>
	</html>