I am facing a dilemma with conflicting arguments while working on a table that is using an ellipsis. The situation involves a table with a tr tag and 2 td's. I require the first td to be the width of the text ( border-collapse: collapse ) which is achievable, HOWEVER, I also need the width of the table to be 100% so that I can use the ellipsis in the 2nd td. So far, I have not been able to figure out how to border-collapse the first td and implement an ellipsis on the second one.
http://jsfiddle.net/epywtvjf/2/
<table>
<tr>
<td>This is the first div.
</td>
<td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
</td>
</tr>
<tr>
<td>This is the first div.
</td>
<td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
</td>
</tr>
<tr>
<td>This is the first div.
</td>
<td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
</td>
</tr>
</table>
table{
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
table td{
white-space: nowrap;
border: none;
line-height:unset;
padding: 0px;
text-align: left;
}