CODEWITHSUNDEEP
htmlcss
Otaku Kyon
Otaku Kyon

Reputation: 445

CSS: Aligned tables overlapping DIV container

I created two tables, which are displayed side by side using the attribute align="left" & align="right" in the html source code. I packed these tables into a div container with the assigned class outerdiv, so that I can add a linear-gradient background behind them. Unfortunately, the tables do not get displayed inside of the div.

I tried adding table-layout:fixed; to .table, as some sites recommended me. I also set border-collapse:separate; to the table cell.

How can I place the background correctly behind the tables?

.table {
  width: 48%;
  margin: 1% !important;
  background: red;
  border-spacing: 20px;
  table-layout: fixed;
}
.outerdiv {
  border: 1px solid rgb(164, 164, 164);
  border-radius: 8px;
  background: transparent linear-gradient(rgb(255, 255, 255), rgb(222, 222, 222)) repeat scroll 0% 0%;
  clear: both;
}
<div class="outerdiv">
  <table class="table" align="left">
    <tbody>
      <tr>
        <td>4
        </td>
      </tr>
      <tr>
        <td>Apples
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table" align="right">
    <tbody>
      <tr>
        <td>2
        </td>
      </tr>
      <tr>
        <td>Bananas
        </td>
      </tr>
    </tbody>
  </table>
  <p></p>
</div>

Upvotes: 2

Views: 9929

Answers (2)

Chris
Chris

Reputation: 59491

Just add display: inline-block to your outerdiv class. This will correctly wrap the tables inside of the parent div. Like so:

.table {
  width: 48%;
  margin: 1% !important;
  background: red;
  border-spacing: 20px;
  table-layout: fixed;
}
.outerdiv {
  border: 1px solid rgb(164, 164, 164);
  border-radius: 8px;
  background: transparent linear-gradient(rgb(255, 255, 255), rgb(222, 222, 222)) repeat scroll 0% 0%;
  clear: both;
  display: inline-block;
}
<div class="outerdiv">
  <table class="table" align="left">
    <tbody>
      <tr>
        <td>4
        </td>
      </tr>
      <tr>
        <td>Apples
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table" align="right">
    <tbody>
      <tr>
        <td>2
        </td>
      </tr>
      <tr>
        <td>Bananas
        </td>
      </tr>
    </tbody>
  </table>
  <p></p>
</div>

Also, Maximillian makes a good point in his post about the align attribute you seem to be using. It is no longer used in HTML5. Instead, either give your tables float: left. Like this:

.table {
  width: 48%;
  margin: 1% !important;
  background: red;
  border-spacing: 20px;
  table-layout: fixed;
  float: left;
}
.outerdiv {
  border: 1px solid rgb(164, 164, 164);
  border-radius: 8px;
  background: transparent linear-gradient(rgb(255, 255, 255), rgb(222, 222, 222)) repeat scroll 0% 0%;
  clear: both;
  display: inline-block;
}
<div class="outerdiv">
  <table class="table">
    <tbody>
      <tr>
        <td>4
        </td>
      </tr>
      <tr>
        <td>Apples
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table">
    <tbody>
      <tr>
        <td>2
        </td>
      </tr>
      <tr>
        <td>Bananas
        </td>
      </tr>
    </tbody>
  </table>
  <p></p>
</div>

Upvotes: 4

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

Firstly the align attribute is deprecated in HTML, so instead of align I would use CSS float instead. Secondly if you use floats and want your div to expand to surround its contents, you will also need an element that clears them - in this case I've used a div with clear: both since it's the most straightforward, but there are more elegant clearing solutions too (some using pseudoelements).

Here is a live demo of your tables being properly wrapped in their div:

.table {
  width: 48%;
  margin: 1% !important;
  background: red;
  border-spacing: 20px;
  table-layout: fixed;
}
.outerdiv {
  border: 1px solid rgb(164, 164, 164);
  border-radius: 8px;
  background: transparent linear-gradient(rgb(255, 255, 255), rgb(222, 222, 222)) repeat scroll 0% 0%;
  clear: both;
}
<div class="outerdiv">
  <table class="table" style="float: left;">
    <tbody>
      <tr>
        <td>4
        </td>
      </tr>
      <tr>
        <td>Apples
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table" style="float: right;">
    <tbody>
      <tr>
        <td>2
        </td>
      </tr>
      <tr>
        <td>Bananas
        </td>
      </tr>
    </tbody>
  </table>
  <div style="clear: both;"></div>
  <p></p>
</div>

Upvotes: 1

Related Questions