Auto break two columns to one row and Harizontal Scroll CSS

Friday, March 31st, 2017 (0 Comment)

We have many objects or columns and want to break two columns to one row by css. After that we will have harizontal scroll css bar if we have too many rows.

Example: we have 7 objects and these objects will auto break two columns to one row by harizontal scroll css

1) Create 7 objects or 7 columns by div tag

2) Create Auto break two columns to one row and Harizontal Scroll css

  • Line 1: width:440px –> we need 40px for scroll bar
  • Line 1: overflow-y:auto –> enable harizontal scroll bar
  • Line 2: float:left –> for change many div tag to many columns

Additional:

We have one table includes header with 2 columns and body with 2 rows and 2 columns.

We need a harizontal scroll bar by css for tbody of table.

3) Create a table with header and body

3) Create a harizontal scroll css

  • line 4: width:430px –> 30px for harizontal scroll css bar

Click here to see demo

Tags: , , , , , , ,

Related Posts

jquery
Create parent child combobox in jquery
jquery
Responsive table CSS or flip table CSS
jquery
Jquery loading overley and delay some seconds
jquery
Create a html tree in jquery or javascript

Related Posts

jquery
Create parent child combobox in jquery
jquery
Responsive table CSS or flip table CSS
jquery
Jquery loading overley and delay some seconds
jquery
Create a html tree in jquery or javascript

Leave a Reply

Your email address will not be published. Required fields are marked *