JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<span class="selected">Selected should look like this</span>

<table class="my-table table table-bordered table-striped">
    <tbody>
        <tr>
            <td class="truncate-container">
                <span class="truncate selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
                <span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
            </td>         
        </tr>
    </tbody>
</table>

CSS

.my-table {
    width: 100%;
}

.truncate-container {
    border: none !important;
    max-width: 200px;
    white-space: nowrap;
}

.truncate-container .truncate {
    width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;  
}

.selected {
  height: 28px;
  margin: 0 15px;
  background: url("http://i.stack.imgur.com/DaQcG.png");
    color: blue;
}

.selected::before,
.selected::after {
  content: ' ';
  position: absolute;
  top: 0;
  width: 15px;
  height: 28px;
}

.selected::before {
  left: -14px;
  background: url("http://i.stack.imgur.com/6m2HC.png") no-repeat;
}

.selected::after {
  right: -8px;
  background:url("http://i.stack.imgur.com/2WA5B.png") 100% no-repeat;
}