Adjust table column width to keep the text in one line - html

Question

I have a table
There is a certain columns that I don't want my text to wrap/go to the next line, but I'm not sure how to prevent that.
Red
I don't want my text to go to the next line
Green
It's okay for it's data to wrap into the next line
HTML
<div class="row" style=" margin-right: 15px; margin-left: 15px;">
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-2 ">
<div id="piechart"></div>
</div>
<div class="col-xs-8 col-sm-9 col-md-9 col-lg-10 ">
<table class="table table-bordered piechart-key ">
<thead>
<th colspan="2" ></th>
<th>Item Summary</th>
<th>Item List</th>
</thead>
<tbody>
<tr>
<td width="22" ></td>
<td width="70" >Incorrect</td>
<td width="55" ><span id="pc-danger"></span>/50</td>
<td width="100" ><span id="pc-danger-list"></span></td>
</tr>
<tr>
<td width="22" ></td>
<td width="70" >Partially Correct</td>
<td width="55" ><span id="pc-warning"></span>/50</td>
<td width="100" ><span id="pc-warning-list"></span></td>
</tr>
<tr>
<td width="22" ></td>
<td width="70" >Correct</td>
<td width="55" ><span id="pc-success"></span>/50</td>
<td width="100" ><span id="pc-success-list"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
I've also tried using the % as its width, but nothing seem to work.
How do I solve this problem ?
Any hints / helps will be much appreciated !

Answer 1

You can set nowrap on th and 2nd td in the table.
.piechart-key th,
.piechart-key td:nth-child(2) {
white-space: nowrap;
}
To force text to wrap in 4th td, you could do.
.piechart-key td:nth-child(4) {
word-break: break-all;
}
For width, suggest to remove width="100" on the 4th td.
UPDATED DEMO

Answer 2

th,
td {
white-space: nowrap;
}
td span {
white-space: normal;
}
<div class="row" style=" margin-right: 15px; margin-left: 15px;">
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-2 ">
<div id="piechart"></div>
</div>
<div class="col-xs-8 col-sm-9 col-md-9 col-lg-10 ">
<table class="table table-bordered piechart-key ">
<thead>
<th colspan="2"></th>
<th>Item Summary</th>
<th>Item List</th>
</thead>
<tbody>
<tr>
<td width="22"></td>
<td width="70">Incorrect</td>
<td width="55"><span id="pc-danger"></span>/50</td>
<td width="100"><span id="pc-danger-list"></span>
</td>
</tr>
<tr>
<td width="22"></td>
<td width="120">Partially Correct</td>
<td width="55"><span id="pc-warning"></span>/50</td>
<td width="100"><span id="pc-warning-list"></span>
</td>
</tr>
<tr>
<td width="22"></td>
<td width="70">Correct</td>
<td width="55"><span id="pc-success"></span>/50</td>
<td width="100"><span id="pc-success-list">Item-inside Item-inside Item-inside</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>