ServerSideSkittles ServerSideSkittles - 7 months ago 24
CSS Question

CSS Fill whitespace inside table TD with ellipsis

I have a table in bootstrap with text inside each td. I don't know if this is possible but I want to fill the whitespace with ellipsis.

The reason I do not want a border bottom is that I do not want the text underlined.

Here is my table and what I have tried so far.

before and after pseudo with ellipsis

The first and last child td are aligned left and right respectively. Any td in the center is center aligned. The idea is to have the ellipsis fill whitespace on the right with left align. Whitespace on the left with right align and on both sides for the center.

My first thought was to use css :before and :after and overfill the content with '.......................' then break with text-overflow: ellipsis like.

.table-menu .table-responsive td:first-child:after, .table-menu .table-responsive td:last-child:before {
content: '.......................';

but as the table is responsive, this will not work. The tables need to be fixed width for the result to work. So overfilling the content just pushed it to a new line.

Is there a way in css or js to achieve this or do I need another approach to filling the whitespace?

Here is a jsfiddle of my above code


I have an idea for this, you can add a label or span inside all <td>, that span/label have white background and <td> have background image with a dot repeated. so the span and label will cover the dots with the white background and the ellipsis will work on any resolution and alineation.


td:nth-child(1) { text-align: left; }
td:nth-child(2) { text-align: center; }
td:nth-child(3) { text-align: right; }

span {
  background-color: white;
  display: inline-block;
  padding: 2px 5px;
td {
  background: url( left bottom repeat-x;
<table width="100%">