aligning the table row in HTML - html

Question

My problem is that I can't find a way to fix the table row height,
if the username exceeded it overlaps to the other column.
check the last two row
and it's also scrollable at side and the username is still in their position.
code for single row:
<tr>
<td class="headcol">
<div class="innerHead">
<div class="user-id" style="display:none;">18993</div>
<input type="checkbox" class="checkboxes" name="user_select[]">
TestingalksdjaskldjsalkdjalskdjaksduqwoieuoqweuowqeiTesting#gmail.com </div>
</td>
<td class="forcedWidthUserCode">Tested091237871</td>
<td class="textAlignCenter">Field staff</td>
<td class="forcedWidth">Testing</td>
<td class="forcedWidth">Tested</td>
<td> N/A </td>
<td class="textAlignCenter">Active</td>
<td> N/A </td>
<td class="forcedWidth"> N/A </td>
<td> N/A </td>
<!--<td>N/A</td>-->
</tr>
CSS:
.headcol {
position: absolute;
width: 18em;
border-right: 2px solid #fff;
background-color: #fff;
z-index: 0;
}
table tr td {
/* background: #fff; */
padding: 6px;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid #ddd;
}
how can I align and wrap the text base on the width of the username column?

Answer 1

It happens because there is a white space between those nodes (the checkbox and the text node). The line breaks at white space.
There are two way to handle this.
As mentioned by #Supraja Ganji: Use word-break.
table tr td {
word-break: break-all;
}
or prevent the whole line from breaking, and hide anything that overflows:
table tr td {
white-space: nowrap;
overflow: hidden;
}

Answer 2

Your username is too long and doesnot contain any space, so it is not wrapping.
for td give word-break: break-all
table tr td {
/* background: #fff; */
padding: 6px;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid #ddd;
word-break: break-all;
}

Answer 3

Using a div inside td is a very bad idea.
Using a div instide a td is not worse than any other way of using tables for layout. (Some people never use tables for layout though, and I happen to be one of them.)
If you use a div in a td you will however get in a situation where it might be hard to predict how the elements will be sized. The default for a div is to determine its width from its parent, and the default for a table cell is to determine its size depending on the size of its content.
The rules for how a div should be sized is well defined in the standards, but the rules for how a td should be sized is not as well defined, so different browsers use slightly different algorithms.
Let me know if you require any further help

Answer 4

.headcol {
position: relative;
width: 18em;
border-right: 2px solid #fff;
background-color: #fff;
z-index: 0;
}
.innerHead {
word-break: break-all;
overflow: hidden;
}
<table>
<tbody><tr>
<td class="headcol">
<div class="innerHead">
<div class="user-id" style="display:none;">18993</div>
<input type="checkbox" class="checkboxes" name="user_select[]">
TestingalksdjaskldjsalkdjalskdjaksduqwoieuoqweuowqeiTesting#gmail.com </div>
</td>
<td class="forcedWidthUserCode">Tested091237871</td>
<td class="textAlignCenter">Field staff</td>
<td class="forcedWidth">Testing</td>
<td class="forcedWidth">Tested</td>
<td> N/A </td>
<td class="textAlignCenter">Active</td>
<td> N/A </td>
<td class="forcedWidth"> N/A </td>
<td> N/A </td>
<!--<td>N/A</td>-->
</tr>
</tbody></table>