Você pode colocar uma caixa de detalhes quando usuário passar o mouse por cima do nome da coluna. Quanto a formatação do nome da coluna em si, você pode escolher definir como linha única ou com um limite do número de linhas que você quer que apareçam.
<div class="box box1">
<p class="text-box">
Nome da coluna introduzido e abreviado em uma única linha.
</p>
<p class="detalies">
Mais detalhes sobre o nome da coluna
</p>
</div>
<div class="box box2">
<p class="text-box">
Caso queira colocar um limite de mais de uma linha nome da coluna. Digamos 2 linhas.
</p>
<p class="detalies">
Mais detalhes
</p>
</div>
.box{
width:200px;
position:relative;
}
.box .detalies{
display:none;
}
.box:hover .detalies{
display:block;
position: absolute;
background-color: white;
top: -100%;
left: 50%;
box-shadow: 0 0 30px rgba(126,126,126, 0.2);
}
.box1 p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box2 p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}