同じ画面内で特定のエリアのみcssを反映させたい

以下HTMLで、titile_area,body_areaのみCSSを反映させたいが、どうしたらいいか？
現状は、titile_area,body_area以外の部分にも適用されてしまう。

<div class="title_area">
<table>
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
</table>
</div>

<div class="body_area">
  <table>
    <tbody>
    <tr>
      <td>1a</td>
      <td>1b</td>
    </tr>
    <tr>
      <td>2a</td>
      <td>2b</td>
    </tr>
    </tbody>
  </table>
</div>

<div class="x_area">
<!-- この内部では以下CSSを適用させたくない -->
<table>
  <thead>
  <tr>
    <th>A Xarea</th>
    <th>B Xarea</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1a Xarea</td>
    <td>1b Xarea</td>
  </tr>
  </tbody>
  </table>
</div>

<div>
<!-- ここには、id,classがない。この内部では以下CSSを適用させたくない -->
<table>
  <thead>
  <tr>
    <th>AAAA title</th>
    <th>BBBB title</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1aaaaa</td>
    <td>1bbbbb</td>
  </tr>
  </tbody>
  </table>
</div>

div.body_area  thead, tbody {
    width: 100%;
    display: block;
}
div.body_area tr {
    width: 100%;
}
div.body_area tbody {
    width: 100%;
    height: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
}
div.title_area tbody {
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}