Suppose I have a table like the one below:
/* CSS Styles for the table */
table.my {
width: 600px;
}
table.my > tr {
height: 40px;
overflow: hidden;
}
.tag {
background: #b8b8b8;
padding: 4px;
color: blue;
}
.tag-area{
display: inline;
}
.name {
width: 400px;
height: 100%;
display: inline-block;
}<table class="table table-striped table-hover my">
<tbody>
<tr>
<td>1</td>
<td>
<span class="name">Ammy Holdings</span>
<div class="tag-area">
<span class="tag">iOS</span>
<span class="tag">PM</span>
<span class="tag">Android</span>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>
<span class="name">Ken Martins</span>
<div class="tag-area">
<span class="tag">PM</span>
<span class="tag">CTO</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>
<span class="name">Ammy Holdings</span>
<div class="tag-area">
<span class="tag">iOS</span>
<span class="tag">PM</span>
<span class="tag">Android</span>
<span class="tag">CEO</span>
<span class="tag">Sale</span>
</div>
</td>
</tr>
</tbody>
</table>And it looks like this:
You can see that the overflow tags are not aligned correctly... but due to the restricted dimensions of the table, I need to group the overflowed content together. Here is an example of how I want to achieve this:
I'm currently out of ideas on how to accomplish this. Any suggestions from the community on how to place overflow content into a button group (using Bootstrap)?
You can review the styles and Plunker demo here:
http://plnkr.co/edit/5qSDb6BGvskS0iwncZdi?p=preview
By the way, I am utilizing AngularJS in the actual application...