Can someone help me with setting a span element to display as inline-block within a table cell?
HTML
<table><tr><td>
<span class="groupName"><a href="#">small link</a></span>
</td></tr><tr><td>
<span class="groupName"><a href="#">really long link that should have a horizontal scroll bar</a></span>
</td></tr></table>
CSS
td{
/*Not sure what to put here*/
}
.groupName{
display:inline-block;
font-size:22px;
max-width:300px;
overflow-x:scroll;
}
My current code is causing both horizontal and vertical scroll bars on all the span or td elements. I only want horizontal scroll bars on span elements that exceed the set width. Appreciate any guidance.
Edit Apologies, here's an improved example in this fiddle http://jsfiddle.net/LxUht/1/