Clever Geek Handbook

A horizontally scrollable table like a div structure

I would like to create a table like a div that fits in a container, can scroll horizontally and not interrupt. I wrote the structure, but when the content gets longer than the container, it puts the rest of the content on a new line.

Here is my code: http://jsfiddle.net/rcdzdyv7/2/

where all these elements represent the string "table":

<div class="header">...</div>
<div class="body">...</div>
<div class="footer">...</div>

My goal is to make these lines one line and look like it was a table. How can I solve this?

+3


source to share


4 answers


You can't use float:left

it because when the content reaches width, there is no way to avoid floating elements jumping to the next line (without changing the HTML structure).

However, you can use display:inline-block

because your elements in this way can change their behavior using a property white-space:nowrap

.

Basically:



    .container {
        width: 500px;
        overflow-x: scroll;
    }
    .header {
        width: auto;
        display:inline-block;
        background-color: #D9D9D9;
        white-space: nowrap;
        clear: both;
    }
    .body {
        display:inline-block;
        margin: 5px 0;
    }

    .body-row {
        background-color: #E5EBFF;
        display:inline-block;
        clear: both;
        white-space: nowrap;
    }
    .footer {
        clear: both;
        background-color: #D9D9D9;
        white-space: nowrap;
    }
    .row-title {
        width: 300px;
        display:inline-block;
    }
    .row-content {
        width: 150px;
        display:inline-block;
    }
    .value {            
        width: 100%;
    }

like in this FIDDLE

+2


source


You can use:

.row-content {
   width: 150px;
   display: inline-block;
}

instead:



.row-content {
   width: 150px;
   float: left;
}

Let me know if it works!

+3


source


this is because you are using a constrained width DIV with no height set. so when the required width is too high for the width of the container, it will automatically fit under. Hope this makes sense. An inline block can be a concession, I personally would recommend using a classic table, but only my opinion

+2


source


try these css properties <div>

for which needs scrolling

div {
  overflow-x: scroll;
  overflow-y: hidden;
}

Hope this is what you want!

0


source






More articles:


All Articles