Text does not fit in table - HTML - html

Question

After going through many solutions non of them could solve my problem.
I have a <td> which has a <table> in it. However, the text inside this inner table does not fit in. Text clips out. I tried various things like overflow:hidden, table-layout: fixed on the <table> and word-wrap:break-word on <td> and still it didn't solve the problem.
Here's my code:
<table id="table1">
<tr>
<td id="td1">
<img src="http://lorempixel.com/165/232" />
</td>
<td id="td2">Long text goes here</td>
<td id="td3" rowspan="7">
<table id="table2">
<tr>
<td>Long text goes here</td>
</tr>
</table>
</td>
</tr>
And here's the CSS:
#table1 {
width: 765px;
border: 1px solid red;
border-spacing: 0;
padding: 0;
}
#td1 {
width: 175px;
vertical-align: top;
}
#td2 {
vertical-align: top;
}
#td3 {
width: 180px;
vertical-align: top;
background-color: #F3F3F3;
}
#table2 {
width: 100%;
border: 1px solid blue;
border-spacing: 0;
padding: 8px;
}
The content inside the inner table clips out. Could anyone please provide a solution so that the inner table can have proper content in it without clipping.
JSFiddle

Answer 1

This can be achieved much more simply. Let's do this with display: table; and display: table-cell;. We can layout block elements with similar behaviour to a table, but much simpler and easier to maintain.
Read more on CSS display
Have a Fiddle!
CSS
.box {
border: solid 1px #CCC;
display: table;
padding: 10px;
}
.box div {
display: table-cell;
vertical-align: top;
margin: 10px;
padding: 10px;
}
.right {
border: solid 1px #F00;
}
HTML
<div class="box">
<div class="left">
<img src="http://placehold.it/200" />
</div>
<div class="center">Content</div>
<div class="right">Content</div>
</div>