JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="pane main-window">
<div class="widget-content">
<div id="acct-mgnt-widget">
<div class="dataTables_wrapper" id="account-plans-dataTable-wapper">
<table id="account-plans-dataTable">
<tbody>
<tr>
<td>
<div class="acct-mgmt-action-containter">
<div class="btn-group action-button">
<button class="btn create-edit-action">
Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a class="create-edit-action" href="#">Action</a>
<li><a class="set-at-risk-status-action" href="#">Option A</a></li>
<li><a class="view-entity-detail-action" href="#">Option B</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="acct-mgmt-action-containter">
<div class="btn-group action-button">
<button class="btn create-edit-action">
Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
...
CSS
.dataTables_wrapper {
}
.dataTables_wrapper tbody tr
{
height: 29px;
border-top: 1px solid #E8E8E8;
}
.dataTables_wrapper tbody tr.even:hover
{
height: 29px;
border-top: 1px solid #E8E8E8;
background-color: #E4F7FD;
}
.dataTables_wrapper tbody tr.odd:hover
{
height: 29px;
border-top: 1px solid #E8E8E8;
background-color: #E4F7FD;
}
.dataTables_wrapper tbody tr.odd
{
background-color: #fff;
}
.dataTables_wrapper tbody tr.even
{
background-color: #f5f5f5;
}
.dataTables_wrapper tbody td {
border-left: 1px #E3E3E3 solid;
border-right: 1px #E3E3E3 solid;
}
.dataTables_wrapper TBODY TR.selectedrow.odd {
BACKGROUND-COLOR: #f9ffc4
}
.dataTables_wrapper TBODY TR.selectedrow.even {
BACKGROUND-COLOR: #f9ffc4
}
.pane {
position: absolute;
background-color: #FFFFFF;
border: 1px solid #ccc;
border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 10px #ccc;
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
left:20px;
top:20px;
width:200px;
height:200px;
overflow:visible;
}
.pane table {
width: 100%;
}
#account-plans-dataTable_wrapper .dataTables_filter {
width: 60%;
}
#account-plans-dataTable_wrapper .dataTables_filter input[type="text"] {
width: 80%;
}
#account-plans-dataTable_wrapper .dataTables_paginate {
margin-right: 0px;
}
#account-plans-dataTable {
width: 100%;
}
.acct-mgmt-action-containter{
white-space: nowrap;
}
.acct-mgmt-action-containter .btn-group {
min-width: 90px;
width: 100%;
white-space: nowrap;
}
.widget-content {
max-height: 82%;
padding: 1em;
font-size: 14px;
*position:relative;
}
.main-window .widget-content {
max-height: 85%;
}
.main-window table {
overflow: auto;
}