html - 当它在表格内时突出显示整个 div

Question

我试图突出显示表格内的一个 div 部分，但它似乎仅限于表格的宽度。滚动后的部分未突出显示。

我可以在 div 中添加样式，例如:“width:400px !important”，但我事先不知道宽度是多少。

有什么简单的解决方法吗？

.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

您可以通过将 inline-block 添加到 .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>