CODEWITHSUNDEEP
htmlcss
jollelj
jollelj

Reputation: 1028

Two tables side by side in a container won't float

I have a problem while trying to place two tables next to each other in a div which is supposed to be scrollable horizontally (x-axis).

When placed outside the container div, the tables float perfectly next to each other, but when inside the container, a break occurs after the first table.

.scroll-container {
    width: 200px;
    height: 100px;
    background: chocolate;
    overflow-x: scroll;
    overflow-y: hidden;
}

table {
    display: table;
    float: left;
}

tr:nth-of-type(even) {
    background-color: yellow;
}
<div class="scroll-container">
  <table>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  </table>
  <table>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  </table>
</div>

<p>without the scroll-container:</p>
<table>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
</table>
<table>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
</table>

Upvotes: 0

Views: 557

Answers (1)

dippas
dippas

Reputation: 60563

The problem is you are not giving a width to your table,

Plus I change you table properties from:

table {
 display:table;
 float:left;
}

to

table {
 display:table-cell;
 width:50% /* only if you need to be equal tables */
}

check snippet bellow:

.scroll-container {
  width: 200px;
  height: 100px;
  background: chocolate;
  overflow-x:scroll;
  overflow-y: hidden;

}
table {
  display: table-cell;
  width:50% /* only if you need to be equal tables */
  
}
tr:nth-of-type(even) {
  background-color: yellow;
}
<div class="scroll-container">
  <table>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
  </table>
</div>

Upvotes: 2

Related Questions