JSFiddle - React, Tailwind, and code Playground
HTML
<div class="bootstrapContent">
<div class="col-xs-12 col-lg-10">
<div class="panel panel-default">
<div class="panel-heading">Manage Keywords</div>
<div class="panel-body">Modify or delete current SMS Keywords.
<div id="ctl08_ctl06_upManageKeywords">
<div class="table-responsive">
<table id="ctl08_ctl06_dlKeywords" class="table table-striped table-collapsible-rows col-xs-12 keywords-table" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td></td>
<th class="col-xs-2" colspan="4">keyword</th>
<th class="col-xs-3" colspan="6">sms number</th>
<th class="col-xs-3" colspan="6"> <span class="col-xs-6">start date</span>
<span class="col-xs-6">end date</span>
</th>
<th class="col-xs-4" colspan="8">tag</th>
<td></td>
</tr>
<tr>
<td></td>
<td class="col-xs-2" colspan="4">test</td>
<td class="col-xs-3" colspan="6">Default Messaging (1-208-481-8144)</td>
<td class="col-xs-3" colspan="6"> <span class="col-xs-6">1/23/2015</span>
<span class="col-xs-6">1/24/2015</span>
</td>
<td class="col-xs-4 text-nowrap" colspan="8">
<div class="pull-left">Bethany Northeast</div>
<div class="text-nowrap pull-right">
<div class="collapsed collapse-chevron" data-toggle="collapse" data-target="#resp1 > td > .collapse"></div> <a id="ctl08_ctl06_dlKeywords_ctl01_btnEdit"...
CSS
.thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
.bootstrapContent .table.table-striped.table-collapsible-rows tbody tr:nth-child(4n + 2), .bootstrapContent .table.table-striped.table-collapsible-rows tbody tr:nth-child(4n - 1) {
background-color: #f9f9f9;
}
.btn-group-lg > .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-group-sm > .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-group-xs > .btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
content:" ";
display: table;
}
.dl-horizontal dd:after, .container:after, .container-fluid:after, .row:after, .form-horizontal .form-group:after, .btn-toolbar:after, .btn-group-vertical > .btn-group:after, .nav:after, .navbar:after, .navbar-header:after, .navbar-collapse:after, .pager:after, .panel-body:after, .modal-footer:after {
clear: both;
}
.alerts .alert .glyphicon {
display: table-cell !important;
vertical-align: middle;
font-size: 14pt;
}
.alerts .alert .message {
display: table-cell;
padding-left: 10px;
line-height: 1.3em;
}
span#totalExpansionSize {
white-space: nowrap;
}
#codeDiv {
...
JavaScript
$("#ctl08_ctl06_modalDeleteWarning").on("shown.bs.modal", function (event) {
var btn = $(event.relatedTarget),
modal = $(this),
kw = modal.find(".keyword-name");
$("#ctl08_ctl06_hfDeleteKeywordID").val(btn.data("keyword-id"));
kw.text(btn.data("keyword-name"));
});