HTML table design with many columns

Question

Recently, I have run into an issue with HTML table design issues. I have a CS program and I want to rebuild it into a BS program. This is a user interface screen capture.

As you can see, there are too many columns in it. A horizontal scroll bar appears. How to improve the user interface?

I tried to combine several columns into one, but this caused some new problems - confusion, not good filtering and sorting.

If you have a good example, please show me.

Answer 1

After a long long thought, not really, but I found some workarounds. I post my solutions here for links.

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

<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 to control which columns will be displayed. I did this by adding a modal dialog based on Bootstrap. By decreasing the displayed column number, you will find that it looks better on a narrow screen.

It is not difficult by writing JavaScript code and making it generally accepted in your project. Remember to make good use of the Local Storage technology to save the user configuration locally and restore the state of the next user who opens this page. In my solution, my local storage key is as follows:

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

my-datatable-hide-col fixed, /business/order is the path, and tb-order is the table identifier. This local storage key value is as follows:

 [0, 3, 4] 

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

3, Allow the user to control the order of the columns. This is similar to monitoring the state of the columns above.

You can also do this by writing JavaScript code and making it public.

Answer 2

As for the better user interface, this helps if every other line is slightly colored (as iTunes did before iTunes 11 changed the whole damn design). This allows the user to easily distinguish each line.

Here is an example of what I mean: http://alistapart.com/article/zebratables

here's how to implement it (super easy): http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/

In addition, this will depend on what the client wants, but obviosusly you will want to remove any columns that are not really used. For those columns where there is only a small value (for example, a single digit), make them as small as possible.

Hope this helps ...