Design of HTML table with many columns

Question

Recently, I ran into trouble of a HTML table design problem. I have a CS program and I want to rebuild it into a BS program. This is the UI screen capture.

As you see, it has too many columns. A horizontal scrollbar will appear. How can I improve the user experience?

I tried to combine several columns into one, but it brought some new problems——confusion, not good to filter and sort.

If you have an good example, please show me.

Answer 1

After long long time thinking, not perfectly, but I found some workarounds. I post my solutions here for references.

1, Allow horizontal scrollbar for too long columns. This can be done easily by adding a DIV tag wrapping the table like this:

<div style="overflow-x: auto;">
    <table class="no-wrap">
    <!-- stuff -->
    <!-- no-wrap is a AdminLTE style which makes the text in the table do not wrap -->
    </table>
</div>

2,Allow the user control which columns be shown. I did this by adding a modal dialog based on Bootstrap. In reducing the displaying column number, you will find it looks better in narrow screen.

This is not hard by writing some JavaScript code and and make it common in your project. Do remember to make good use of the Local Storage technology to save the user's configuration locally and restore the state next time user opening this page. In my solution, my Local Storage key is like this:

my-datatable-hide-col:/business/order:tb-order

my-datatable-hide-col is fixed, /business/order is the path, and the tb-order is the table's id. This Local Storage key's value is like this:

[0, 3, 4]

This means the column 0, column 3 and column 4 is going to be hidden. If the value is not exist or empty, no column will be hidden.

3,Allow the user control the column's order. It's similar to controlling columns' displaying state above.

This also can be done by writing some JavaScript code and make it common.