HTML Table With a Horizontal Scroll

You may use an HTML table to display any content that fits well within a chart, such as scores or multiplication tables. If you wish to allot a certain width for your table to fit on your website, but your content is wider, you'll need to add a horizontal scrollbar to table. However, tables do not support scrollbars, so you will have to use a workaround in order to do this effectively.

HTML Tables

Tables are an hypertext markup language element consisting of rows and columns. When a row and column intersect, they form a cell. This cell then contains text, images, links and other element. A table can consist of only one cell -- from one row and column -- or an unlimited number of cells. The basic code for a table is as follows:








Cell 1, Row 1	Cell 2, Row 1
Cell 1, Row 2	Cell 2, Row 2

Scrollbar Behaviour

By default, most containers -- including div layers -- will create horizontal and vertical scrollbars whenever the content inside the container is larger than the container itself. This allows your visitor to scroll to view the rest of the clipped content, without extending the size of the container and possibly breaking the layout of your page. When content is smaller than the container, no scrollbar appears. However, tables never show scrollbars, even when you force a scrollbar with code. Thus, you must place your entire table in another container, such as a div, to give the appearance of a scrollable table.

Scrolling Containers

You can introduce a horizontal scrollbar to your containing element, even if that element wouldn't naturally have a scrollbar with cascading stylesheets or CSS. To apply a scrollbar to the container, add the style property "scroll" with the value "scroll" and place the table inside the container, as in the following example:






Cell 1, Row 1

Cell 2, Row 1



This code will apply both a horizontal scrollbar the table, allowing your visitor to see the entirety of the content.

Considerations

Note that setting the "overflow" property to "auto" will produce both a vertical and horizontal scrollbar so you must hide the vertical scrollbar, on the "Y" axis. This method works best if your div container is slightly taller than your table and as long as the table is wider than the div. Otherwise, the scrollbar will not appear. You can force the scrollbar arrows to appear, but they won't be active, if you set the overflow value to "scroll" instead of "auto."