table buttons

something

by msmini5

HTML

<script src="http://siga1.edubox.pt/AppMunicipios_BackOffice/Scripts/JQuery/jquery-1.11.2.min.js"></script>
<div class="tableContainer">
    <table class="grid withCornerIcon">
        
        <tbody>
            <tr class="grid_header">
                <th>Title</th>
                <th>Description</th>
                <th class="center">Date</th>
                <th></th>
            </tr>
            <tr class="grid_dados" data-id="8">
                <td style="width:100px;">Title 1</td>
                <td>Title 1 Desc</td>
                <td class="center dateTd">23-05-2016</td>
                <td class="cornerIconContainer">
                  <div>                
                    <span class="icon icon-aas-btn-confirm cornerIcon withIcon green" title="Published"></span>
                  </div>
                  <div class="listBtsMenu">
                      <div class="listBtsBar">
                        <div></div>
                      </div>
                      <div class="listBts">
                        <div class="circle gold"></div>
                        <div class="circle blue"></div>
                        <div class="circle red"></div>
                      </div>
                   </div>
                </td>
            </tr>
            <tr class="grid_dados" data-id="3">
                <td style="width:100px;">Title 2</td>
                <td>Title 2 Desc</td>
                <td class="center dateTd">02-05-2016</td>
                <td class="cornerIconContainer">
                  <div>                
                    <span class="icon icon-aas-btn-confirm cornerIcon withIcon green" title="Published"></span>
                  </div>
                  <div class="listBtsMenu">
                      <div class="listBtsBar">
                        <div></div>
                      </div>
                      <div class="listBts">
                        <div class="circle gold"></div>
                        <div...

CSS

.tableContainer {
    width: 100%;
    overflow: auto;
    padding-bottom: 5px;
}

.grid {
    clear: both;
    max-width: 500px;
    margin: 20px 0px;
    border-collapse: collapse;
    background-color: white;
}

.grid.withCornerIcon {
    width: calc(100% - 10px);
}

.grid .grid_header {
    font-weight: bold;
    width: 100%;
    vertical-align: middle;
}

.grid .grid_header th {
    text-align: left !important;
    font-size: 15px;
    font-weight: normal;
    border: 0px;
    padding: 5px 15px;
}

.grid, 
.grid tr, 
.grid td, 
.grid th {
    border: 0px none transparent;
}

.grid > tbody > tr:not(.grid_header) {
    border-bottom: 20px solid white;
    height: 75px;
    background-color: #e6e6e6;
}

.grid > tbody > tr {
    width: 100%;
}

.grid > tbody > tr:last-child {
    border-bottom: none;
}

.grid .grid_header th.center, 
.grid .grid_dados td.center, 
.grid-div .grid_header th.center, 
.grid-div .grid_dados td.center 
{
    text-align: center !important;
}

.grid .grid_dados td 
{
    border: 0px;
    padding: 20px 15px;
    word-break: break-word;
}

.dateTd
{
  width: 80px;
}

.cornerIconContainer {
    position: relative;
    height: 100%;
    clear: both;
    vertical-align: top;
}

.cornerIconContainer .cornerIcon.withIcon {
    color: #e6e6e6;
    font-size: 10px;
    padding-top: 2px;
    padding-left: 2px;
}

.green, .cornerIconContainer .cornerIcon.green {
    background-color: #4cd97a;
}

.cornerIconContainer .cornerIcon {
    right: -10px;
    top: -8px;
    position: absolute;
    z-index: 2000;
    height: 15px;
    width: 15px;
    border: 5px solid white;
    border-radius: 50%;
    background: white;
}

.listBtsMenu
{
    cursor: pointer;
    right: 0px;
    top: 0px;
    z-index: 1999;
    clear: both;
    height: 100%;
}

.listBtsBar
{
    background-color: black;
    right: 0px;
    top: 0px;
    position: absolute;
    z-index: 1999;
    width: 20px;
    clear: both;
    height: 100%;
}
.listBtsBar > div {
    width: 10px;
   ...

JavaScript

$(".listBtsMenu").click(function(){
	if($(this).find(".listBts").hasClass("active"))
  	$(this).find(".listBts").removeClass("active");
  else
  	$(this).find(".listBts").addClass("active");
});