当它在表格内时突出显示整个 div答案

【问题标题】：Highlight entire div when it's inside table当它在表格内时突出显示整个 div
【发布时间】：2018-02-07 17:57:52
【问题描述】：

我正在尝试突出显示表格内部的 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>

【问题讨论】：

标签： html css highlight

【解决方案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>

【讨论】：

? 很高兴我能帮上忙。

【解决方案2】：

我看到了 3 个解决方案：

使用<span> 代替<div> 来包含您的文本。
在同一个div上使用display:inline-block
第二种解决方案的更简洁的变体：将 display:inline-block 添加到 css 中的 area1ContentIdclass。

.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>

还要注意，我宁愿在 CSS 中定义一个类，而不是使用 styleattribute

【讨论】：