Highlight entire div when it's inside table - html

Question

I'm trying to highlight a div section which is inside of a table, but it seems it's limited to the width of the table. The part after the scroll is not highlighted.
I can add styles in the div, e.g: "width:400px !important", but I don't know in advance what the width will be.
Is there any simple solution for this?
.area1{
border:1px solid;
height:200px;
overflow:scroll;
float: left;
font-size: 16px;
}
.area1Content{
height:500px;
font-size: 16px;
white-space:nowrap;
}
<div id="area1Id" class="area1">
<table>
<tr>
<td style="min-width:300px; max-width:300px"><div id="area1ContentId" class="area1Content">
<div style="BACKGROUND-COLOR:cyan;">Test long text sentence that will exceed the box width. I want that all the sentence will be highlighed</div>
</div>
</td>
</tr>
</table>
</div>

Answer 1

You can achieve what you're trying to do by adding inline-block to .area1Content:
.area1{
border:1px solid;
height:200px;
overflow:scroll;
float: left;
font-size: 16px;
}
.area1Content{
height:500px;
font-size: 16px;
white-space:nowrap;
display: inline-block;
}
<div id="area1Id" class="area1">
<table>
<tr>
<td style="min-width:300px; max-width:300px"><div id="area1ContentId" class="area1Content">
<div style="BACKGROUND-COLOR:cyan;">Test long text sentence that will exceed the box width. I want that all the sentence will be highlighed</div>
</div>
</td>
</tr>
</table>
</div>

Answer 2

I see 3 solutions :
Either use a <span> instead of a <div> to contain your text.
Either use display:inline-block on the same div
Cleaner variation of the second solution : add display:inline-block to your area1ContentIdclass in the css.
.area1{
border:1px solid;
height:200px;
overflow:scroll;
float: left;
font-size: 16px;
}
.area1Content{
height:500px;
font-size: 16px;
white-space:nowrap;
}
<div id="area1Id" class="area1">
<table>
<tr>
<td style="min-width:300px; max-width:300px"><div id="area1ContentId" class="area1Content">
<div style="BACKGROUND-COLOR:cyan; display:inline-block">Test long text sentence that will exceed the box width. I want that all the sentence will be highlighed</div>
</div>
</td>
</tr>
</table>
</div>
Note also that instead of using the styleattribute I'd rather define a class in the CSS