You just needed to get rid of the white-space here
table td > div {
overflow: hidden;
white-space: nowrap;
}
and I added colgroups. They are better for setting widths in your columns and avoid issues
Question
I need your help.
It seems that my TD cell is not respecting the overflow: hidden in the CSS. I've done everything recommended with the fixed layout of the table as well as specifying the widths of the TH's and TD's
Any ideas?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-collapse:collapse;
border-spacing: 0;
table-layout: fixed;
}
table th {
padding:10px 10px 10px 10px;
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
width: 160px;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-left: 0;
}
table tr {
text-align: center;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:10px;
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
background: #fafafa;
width: 130px;
}
table tr:last-child td {
border-bottom: 0;
}
table tr:hover td {
background: #f2f2f2;
}
#wrapper {
width: 740px;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid rgb(205,205,205);
}
table thead {
position:fixed;
}
table td > div {
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<!-- Table Header -->
<thead>
<tr>
<th>Task Details</th>
<th>Firstname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>Create</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>Take the dog</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>Waste half</td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td><div>Feel inferior</div></td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><div>Some long text that shouldn't resize the box</div></td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td><div>Vow to complete</div></td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>Procrastinate</td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
<td> </td>
<td>80%</td>
<td><a href="#inexistent-id">Another</a></td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</div>
</body>
</html>
Solution
You just needed to get rid of the white-space here
table td > div {
overflow: hidden;
white-space: nowrap;
}
and I added colgroups. They are better for setting widths in your columns and avoid issues