I'm trying to make some html with css pages (I'm new to both) and I want to add styles to a table header with column long names, this names are required to be long, but the column width is fixed, making these columns without css would show them with text wrapping so the row height would show just NOT nice. I'm trying to find a nice way to display the table. What es to my mind, is "cut" the name of the column veryLongColumName to veryLong... and on hover of the table header, display it as they are originally, how can I do this? do I need to begin learning JavaScript >> jQuery in order to do this? Any sample code I can use?

If you have a better idea about how to display nicely that content it is wele.

I have no idea how to do this as it seems that there need to be data manipulation (so I need JavaScript or jQuery); how ever, I think that having two div tags with the shortened name and the original name in another and display one or other depending on the mouse hover will do the work but I don't know how to make that happen (is this also jQuery?).

Thanks in advance.

/

I'm trying to make some html with css pages (I'm new to both) and I want to add styles to a table header with column long names, this names are required to be long, but the column width is fixed, making these columns without css would show them with text wrapping so the row height would show just NOT nice. I'm trying to find a nice way to display the table. What es to my mind, is "cut" the name of the column veryLongColumName to veryLong... and on hover of the table header, display it as they are originally, how can I do this? do I need to begin learning JavaScript >> jQuery in order to do this? Any sample code I can use?

If you have a better idea about how to display nicely that content it is wele.

I have no idea how to do this as it seems that there need to be data manipulation (so I need JavaScript or jQuery); how ever, I think that having two div tags with the shortened name and the original name in another and display one or other depending on the mouse hover will do the work but I don't know how to make that happen (is this also jQuery?).

Thanks in advance.

http://jsfiddle/byakku/Q5V98/1/

• javascript
• html
• css

Share Improve this question Follow edited Feb 17, 2012 at 19:47 Roger asked Feb 17, 2012 at 19:30 RogerRoger 2,95233 gold badges3232 silver badges3939 bronze badges 4

• Could you give some example HTML? (It makes testing easier.) – Brigand Commented Feb 17, 2012 at 19:36
• @FakeRainBrigand Hold on a sec. – Roger Commented Feb 17, 2012 at 19:38
• Sure. I have one more question though: what browsers do you need this to work on? Specifically Internet Explorer versions. – Brigand Commented Feb 17, 2012 at 19:43
• @FakeRainBrigand Well, Preferrably for low versions of IE (I would like that ppl just used newer versions) the application should be cross-browser, but IE 7+ is acceptable. – Roger Commented Feb 17, 2012 at 19:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I tried to implement it in plain javascript without any lib/plugin and below is what I have,

Solution using plain javascript (without jQuery) DEMO

The above demo code can be reduced a lot by using jQuery,

Solution using jQuery - DEMO

Using jQuery:

function shortHandTableHeaders(tableID, limit) {

    var ths = $('#' + tableID + ' thead tr th');        
    var content;

    ths.each (function () {
        var $this = $(this);
        content = $this.text();

        if (content.length > limit) {
           $this.data('longheader', content);
           $this.text (shortHandHeaderTxt(content, limit));

           $this.hover (
               function() {
                   $(this).text($this.data('longheader'));
               },
               function () {
                   $(this).text(shortHandHeaderTxt($this.data('longheader'), limit));
               }
           );
         }
    });
}

function shortHandHeaderTxt(txt, limit) {
    return txt.substring(0, limit - 3) + "...";
}

Below is the another implementation without jQuery,

function shortHandTableHeaders(tableID, limit) {

    var tableEl = document.getElementById(tableID);
    var thead = tableEl.getElementsByTagName("thead");
    var thtrs = thead[0].getElementsByTagName("tr");
    var ths, content;

    for (var i = 0; i < thtrs.length; i++) {
        ths = thtrs[i].getElementsByTagName("th");

        for (var j = 0; j < ths.length; j++) {
            content = ths[j].innerHTML;

            if (content.length > limit) {
                ths[j].title = content;
                ths[j].innerHTML = shortHandHeaderTxt(content, limit);
                addEventHandler(ths[j], 'mouseover', function() {
                    this.innerHTML = this.title;
                });

                addEventHandler(ths[j], 'mouseout', function() {
                    this.innerHTML = shortHandHeaderTxt(this.title, limit);

                });
            }
        }
    }
}


function addEventHandler(el, eType, handler) {
    if (el.addEventListener) { // W3C, FF  
        el.addEventListener(eType, handler, false);
    } else if (el.attachEvent) { // IE  
        el.attachEvent('on' + eType, function() {
            handler.call(el);
        });
    }
}

function shortHandHeaderTxt(txt, limit) {
    return txt.substring(0, limit - 3) + "...";
}

Here's a way to do it with just CSS.

demo

In the HTML, put a class="short" on the abbreviated message.

<table>
    <thead>
        <th>Veeery long text title for a column header</th>
        <th class="short">Veeery long...</th>
    </thead>
    <tbody>
        <tr>
            <td>What it looks like when mouse hover</td>
            <td>What it looks like when mouse is out of header, height should fit the content</td>
        </tr>    
    </tbody>
</table>

Our CSS overloads the display property. There are much nicer ways to do this, but they aren't patible with most IE versions. I haven't tested this on more than FireFox, but it should work for IE7+, and modern browsers.

thead th {
    display: none;
}

thead th.short {
    display: table-cell;
}

thead:hover th {
   display: table-cell;
}

thead:hover th.short {
    display: none;
}