Question

我有一个固定宽度列的表。如果列已排序，我想在其标题的左侧显示一个箭头图标。但是，当标题中的文本换行时，div不会正确调整大小并且箭头会被按到最左边。

以下演示显示了两列。左边有一个简短的标题，是正确的。正确的标题有很长的标题，并不符合要求：https://jsfiddle.net/79pfyxo6/

这是我用于表格标题的CSS：

.sortedColumn {
    float: right;
    display: table;
    table-layout: fixed; 
}

.titleElement {
    display: table-cell;
    vertical-align: middle;
}

如何更改它，以便第二列的箭头紧紧包裹在文本中，如下图所示：http://pasteboard.co/2xqPi8Nx.png

Answer 1

嗨，请查看这个可能对您有帮助的CSS

＆＃13;

 td, th {
        background: #88FF88;    
        text-align: right;
        word-wrap: break-word;
    }
    td {
        width: 150px;
    }
    .sortedColumn {
        float:right;
        display: table;
        table-layout: fixed; 
    }
    .arrow {
        width: 15px;
    }
    .sortedColumn {    
        display: table;
        table-layout: fixed; 
    }    
    .sortedColumn img{
        vertical-align: middle; //added new 
    }
    .titleElement {
        display: initial;    // changed
        vertical-align: middle;
    }

＆＃13;

单词包装时调整div

1 个答案: