Good ways to display long rows of data

I need to di开发者_运维知识库splay records of information from my database to my users. Currently, I have this info bound to a datagrid. However, there are too many fields to display and my tables are going off the page. I don't really want my pages to have horizontal scrolling, and I don't want to decrease the font size.. so I was wondering if anyone had any better ideas to go about displaying long rows of data? Just ask if any additional info is needed, thx :)

---

My go-to solution for something like this is to round up the most essential information (anything that will immediately identify what/who the row's about) and put the rest in a following row in a new TD and interior table. Hide/show that with javascript, and you're golden.

Example HTML

<tr>
    <td>Joe</td>
    <td>Jones</td>
    <td>555-555-5555 (m)</td>
    <td class="more">more..</td>
</tr>
<tr class='showme'>
    <td class='showthis' colspan="4">
        <h2>More info</h2>
        <table>
            <!-- yet more info here -->
        </table>
    </td>
</tr>

jQuery to make it work

$("td.more").click(function(){
    // don't hide/show the next TR itself, may cause cross-browser issues
    $(this).closest("tr").next("tr.showme").find(".showthis").slideToggle();
});

Necessary CSS

.showthis { display:none; }
/* you'll want to play with padding and such for open/close states, too */

You can make it a lot more sophisticated, of course, but this is the basic functionality.

---

There's several ways. Largely it depends on the data.

1. Optional columns (user configurable - allow the user to hide columns they don't want). This way you can also have columns that would be "nice to have" but the user doesn't always need.

2. Use small icons instead of words where applicable For example, instead of "True" put a small checkmark.

3. Use Ellipsis (...) on long text, with a div title attribute so they see full text when they mouseover.

---

I know you don't like the idea of horizontal scrolling, but perhaps if you implemented it such that the first few meaningful columns were fixed/frozen the horizontal scroll would be less annoying to the users?

---

Horizontal scrolling on a page is the devil! But, you can at least contain it somewhat in this situation by wrapping your GridView in a div and enable horizontal scrolling on only the div itself (i.e just the grid).

<div style="overflow-x: auto;">
 //GridView
</div>

---

Split the data into two rows. Try to keep it logical, for instance, the first column of the first row will be "First Name" and the first column of the second column will be "Last Name". Then the second column will be "street address" for the first row and "city, state, zip" for the second row. Etcetera.

You may be better served using a ListView instead of GridView in this case.