CODEWITHSUNDEEP
htmlcss
isxpjm
isxpjm

Reputation: 323

Left align a group of tables so that they all appear on the same line

Here is my HTML:

<body>
    <div class="horizontal-scroller">
        <table class="float-left">
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
        </table>
        <table class="float-left">
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
        </table>
        <table class="float-left">
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
        </table>
    </div>
</body>

And CSS:

.float-left {
  float: left;
}

.horizontal-scroller {
    overflow-x: auto;
}

I am trying to achive the effect where all three tables appear on the same row no matter the size of the containing div. This example works well when the page is wide enough to fit them. But when I shrink the size of the page the tables start to wrap. I don't want this to happen. Instead I want a horizontal scrollbar to appear on the div so that the user can scroll to see them. How can I achieve this?

Plunker example: https://plnkr.co/edit/ffSvoraDERVgdi1RFF31?p=preview

Upvotes: 0

Views: 41

Answers (2)

Jeremy Blalock
Jeremy Blalock

Reputation: 2619

This can be achieved by wrapping each table in a <div> and using a combination of display: inline-block and white-space: nowrap.

Your HTML could look something like this:

<div class="wrapper">
  <div class="child">
    <table>
      <tr>
        <td>Cell 1</td>
      </tr>
    </table>
  </div>
  <div class="child">
    <table>
      <tr>
        <td>Cell 2</td>
      </tr>
    </table>
  </div>
  <div class="child">
    <table>
      <tr>
        <td>Cell 3</td>
      </tr>
    </table>
  </div>
</div>

And then the CSS could do the following:

.wrapper {
  white-space: nowrap;
  overflow-x: auto;
}

.child {
  display: inline-block;
}

Here is the full example: https://jsfiddle.net/xzd0dqhk/

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

display: flex on the parent will put it in a flex row

/* Styles go here */

.horizontal-scroller {
    overflow-x: auto;
    display: flex;
}
<div class="horizontal-scroller">
      <table>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        </tr>
      </table>
      <table>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        </tr>
      </table>
      <table>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        </tr>
      </table>
</div>

Upvotes: 1

Related Questions