Disable vertical overflow in HTML/CSS

Question

Currently I'm learning about HTML/CSS, I want to create a blog in windows 8 style (metro style). But I have a problem in disabling the overflow-y. I'm using a table in <body> of html with a fixed size of each table data. But whenever I add a cell into a row in the table, if the row is overflow in x direction, that cell automatically jump down.

Is there anyway to avoid this?

this is a part of my code:

CSS:

/***Creating the dashboard in metro style***/
.dashboard {
    position: fixed;
    top: 10.5em;
    left: 0;
    padding-top: 1em;
    padding-left: 1em;
    padding-bottom: 1em;
    border: 5px solid white;
    overflow-x: scroll;
    overflow-y:hidden;
}

td {
    border: 3px solid yellow;
    float: left;
    margin: 0;
    color: black;
    width: 300px;
    font-size: 1.5em;
    cursor: pointer;
    position: relative;
    background-color: white;
}

.tile-1{
    background-color: #56d9c9;
    color: white;
}

HTML:

<div class="dashboard">
            <table style="border: 1px solid red">
                <tr>
                    <td><p>I just got you babe 1</p></td>
                    <td><p>I just got you babe 2</p></td>
                    <td><p>I just got you babe 3</p></td>
                    <td><p>I just got you babe 4</p></td>
                    <td><p>I just got you babe 5</p></td>
                    <td><p>I just got you babe 6</p></td>
                </tr>

                <tr>
                    <td><p>I just got you babe 7</p></td>
                    <td><p>I just got you babe 8</p></td>
                    <td><p>I just got you babe 9</p></td>
                    <td><p>I just got you babe 10</p></td>
                    <td><p>I just got you babe 11</p></td>
                    <td><p>I just got you babe 12</p></td>
                </tr>

                <tr>
                    <td><p>I just got you babe 13</p></td>
                    <td><p>I just got you babe 14</p></td>
                    <td><p>I just got you babe 15</p></td>
                    <td><p>I just got you babe 16</p></td>
                    <td><p>I just got you babe 17</p></td>
                    <td><p>I just got you babe 18</p></td>
                    <td><p>I just got you babe 19</p></td>
                    <td><p>I just got you babe 20</p></td>
                </tr>
            </table>
        </div>

Each row needs to have the same amount of columns. If you don't want the same amount you have to use colspan on them. — putvande
– putvande, Commented Jun 16, 2014 at 12:41
This isn't a suitable use for a table, the table and associated elements are for displaying tabular data. You're also misunderstanding the mechanics of table layout (Which is fair enough, it can be a bit confusing). — i_like_robots
– i_like_robots, Commented Jun 16, 2014 at 12:42
You CAN NOT prevent a table from auto-sizing to fit it's content. It's a property of tables, sometimes handy, other times not so much.. I think you're gonna have to replace your table with an custom div-grid or something — myfunkyside
– myfunkyside, Commented Jun 16, 2014 at 12:43

Abhitalks · Accepted Answer · 2014-06-16 13:14:05Z

What you are after is a table-like layout not really tables. Tables are used for tabular data, not for layouts.

Having said that, you can add more blocks without breaking horizontal scrolling easily without making much changes to your mental layout. Here is an example:

Demo: http://jsfiddle.net/abhitalks/HSE4e/2/

HTML:

Remains similar to your layout, the only difference being instead of tables and rows and cells, you have divs.

<div class="wrap">                      <!-- wrapper to contain the layout -->
    <div class="table">                 <!-- this holds your blocks and scrolls -->
        <div class="row">               <!-- this allows you multiple rows -->
            <div class="content"></div> <!-- actual content -->
            <div class="content"></div>
        </div>
        <div class="row">
            <div class="content"></div> <!-- by having rows, -->
            <div class="content"></div> <!-- you can have differing number of.. -->
            <div class="content"></div> <!-- ..content blocks in each row -->
        </div>
        ...
    </div>
</div>

CSS:

* {
    margin: 0; padding: 0; box-sizing: border-box; /* reset */
}
html, body {
    overflow: hidden; 
    width: 100%; /* restrict the page width to viewport */
}
.wrap {
    width: 100%; height: 200px; /* restrict width to viewport */
    overflow-y: hidden; /* hide vertical scrollbar */
    overflow-x: scroll; /* show only horizontal scrollbar */
}
.table {
    width: 1000px; /* arbitrarily high width to allow scroll */
    height: 100%; /* restrict height to the container */
}
.row {
    margin: 8px 8px; /* visually separate rows */
}
.content {
    display: inline-block; /* make content blocks flow inline */
    width: 100px; height: 50px; /* any height/width you want */
    margin: 0px 8px; /* visually separate content blocks */
}

So, using the same mental model as you have, just think CSS and not tables.

With this arrangement you can have differing number of content blocks in each row. You can have as many rows as you can fit in the available height.

Using Javascript you can handle mouse-wheel as well, to scroll horizontally.

mostafaznv · Accepted Answer · 2014-06-16 13:09:07Z

2

you must set width and height for your table!

i changed your code !

See it on Jsfiddle

CSS:

.dashboard {
    position: fixed;
    top: 10.5em;
    left: 0;
    max-height:180px;
    width:500px;
    padding-top: 1em;
    padding-left: 1em;
    padding-bottom: 1em;
    border: 5px solid white;
    overflow-x:scroll;
}
table{
    height:200px;
    width:10000px;
}
td {
    border: 3px solid yellow;
    margin: 0;
    color: black;
    width: 300px;
    font-size: 1.5em;
    cursor: pointer;
    margin:2px;
    display:inline-block;
    background-color: white;
}
.tile-1{
    background-color: #56d9c9;
    color: white;
}

answered Jun 16, 2014 at 13:09

mostafaznv

99215 silver badges26 bronze badges

Comments

i_like_robots · Accepted Answer · 2014-06-16 12:52:35Z

1

You need to re-think your entire approach to the problem, as commented above the use of a table is semantically and conceptually incorrect. Fortunately there's lots of information about creating horizontally scrolling sites, for instance check out http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/.

edited Jun 16, 2014 at 12:52

answered Jun 16, 2014 at 12:44

i_like_robots

2,7872 gold badges20 silver badges23 bronze badges

Collectives™ on Stack Overflow

Disable vertical overflow in HTML/CSS

3 Answers 3

Comments

See it on Jsfiddle

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related