突出显示整个 div 位于 table 内

Question

我试图突出显示 table 内的 div 部分，但它似乎仅限于 table 的宽度。滚动后的部分没有突出显示。

我可以在 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>

Answer 2

我看到 3 个解决方案：

要么使用 <span> 而不是 <div> 来包含您的文本。
在同一个 div

display:inline-block

第二种解决方案的更简洁的变体：将 display:inline-block 添加到 cssclass 中的 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>

另请注意，我不想使用 style 属性，而是在 CSS

中定义一个 class

突出显示整个 div 位于 table 内

Highlight entire div when it's inside table

html

css

highlight