Summary of css table adaptive methods

Currently, there are many smart table adaptive solutions.

They are flip the table on it's side, convert it to a pie chart, gradually reduce the columns, allow users to determine columns, and set to allow partial scrolling into SS the table. these are smart.

However, we should also note their shortcomings:

1. Some of them are difficult to implement in practice, especially those that rely on the: before pseudo element to generate the header.
2. Some of them are not suitable for all types of table data, such as pie chart.
3. Some of them may be rejected by users. For example, columns that disappear.
So you want to see how many lines of css can be used to adapt the CSS of the table without javascript code? See the following example:

Solution 1: Super Simple

What you need to do is to use a div to include the table.

The code is as follows:	Copy code
<Div class = "table-container"> <Table> ... <Table> </Div>

Then add the following CSS code

The code is as follows:	Copy code
. Table-container { Width: 100%; Overflow-y: auto; _ Overflow: auto; Margin: 0 0 1em; }

Demonstration 1
Solution 2: Add a scroll bar for IOS
If you look at this case under iOS (such as iPhone), you will not see the scroll bar. Although you can scroll through the table, it is not obvious. We only need to add some extra CSS to solve this problem.

The code is as follows:	Copy code
. Table-container:-webkit-scrollbar { -Webkit-appearance: none; Width: 14px; Height: 14px; } . Table-container:-webkit-scrollbar-thumb { Border-radius: 8px; Border: 3px solid # fff; Background-color: rgba (0, 0, 0,. 3 ); }

Demonstration 2
Solution 3: Add a scroll bar for each
The following jquery plug-ins can help you

JScrollPane
Custom content scroller
JScroller
Tiny Scroller
Solution 4: Add a gradient layer
You may have noticed that the edge of the table has been cut. Add a blurred gradient layer to it. To adapt to all devices, we also need to add some labels.

The code is as follows:	Copy code
<Div class = "table-container-outer"> <Div class = "table-container-fade"> </div> <Div class = "table-container"> <Table>... <Table> </Div> </Div>

The following is CSS.

The code is as follows:

Copy code

. Table-container-outer {position: relative ;} . Table-container-fade { Position: absolute; Right: 0; Width: 30px; Height: 100%; Background-image:-webkit-linear-gradient (0deg, rgba (255,255,255,. 5), # fff ); Background-image:-moz-linear-gradient (0deg, rgba (255,255,255,. 5), # fff ); Background-image:-ms-linear-gradient (0deg, rgba (255,255,255,. 5), # fff ); Background-image:-o-linear-gradient (0deg, rgba (255,255,255,. 5), # fff ); Background-image: linear-gradient (0deg, rgba (255,255,255,. 5), # fff ); }

This is the simple adaptive table you see.