Question

我正在尝试使用css页面创建一些html（我是两者都是新手）并且我想将样式添加到具有列长名称的表头中，这些名称必须很长，但列宽是固定，使这些列没有CSS将显示文本包装，所以行高将显示不好。我正试图找到一种很好的方式来显示表格。我想到的是，将veryLongColumName列的名称“剪切”为veryLong...，并在悬停表格标题时，按原样显示，我该怎么做？我是否需要开始学习JavaScript＆gt;＆gt; jQuery为了做到这一点？我可以使用任何示例代码吗？

如果您对如何正确显示该内容有更好的了解，欢迎使用。

我不知道怎么做，因为似乎需要进行数据操作（所以我需要JavaScript或jQuery）;但是，我认为有两个div标签的缩写名称和原始名称在另一个并根据鼠标悬停显示一个或其他将完成工作，但我不知道如何实现这一点（这也是jQuery ？）。

提前致谢。

http://jsfiddle.net/byakku/Q5V98/1/

Answer 1

我尝试在没有任何lib /插件的普通javascript中实现它，下面就是我所拥有的，

使用普通javascript（不带jQuery）DEMO

的解决方案

使用jQuery可以大大减少上面的演示代码，

使用jQuery的解决方案 - DEMO

使用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) + "...";
}

下面是另一个实现没有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) + "...";
}

Answer 2

这是一种只使用CSS的方法。

demo

在HTML中，在缩写信息上添加class="short"。

<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>

我们的CSS重载了display属性。有更好的方法可以做到这一点，但它们与大多数IE版本不兼容。我没有在FireFox上测试过这个，但它应该适用于IE7 +和现代浏览器。

thead th {
    display: none;
}

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

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

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

表头上的长文本可视化

2 个答案:

demo