rk fred rk fred - 17 days ago 13
CSS Question

Span inside th width

I have table with span element in th.
I want span width to match th, but actually it fills the entire row :(.

My code:

for (var i = 0; i < testInfoFieldsNames.length; i++) {
title = testInfoFieldsNames[i].toLowerCase();

th = $('<th></th>');
span = $('<span></span>').addClass('cell-container').text(title);
th.append( span );
}

tableHeader.append(th);


css:

.cell-container {
position: absolute;
display: block;
top: 5px;
left: 0;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}


How can I set span width to fill th only?

Answer

i think you should give th a style like:

th{
  position:relative;
}