Re-sizable flex table in HTML

Re-sizable flex table in HTML - javascript

I am working on flex table in HTML, created of multiple div. I am trying to make it re-sizable. My table has similar layout to the link mentioned below. How can I achieve this using multiple div without using table tag?
<div class="container">
<h2>Resizable Columns</h2>
<table class="table table-bordered" data-resizable-columns-id="demo-table-v2">
<thead>
<tr>
<th data-resizable-column-id="nr">#</th>
<th data-resizable-column-id="first_name">First Name</th>
<th data-resizable-column-id="nickname">Nickname</th>
<th data-resizable-column-id="last_name">Last Name</th>
<th data-resizable-column-id="username" id="username-column">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Dude Meister</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Barney von Matterhorn</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>What</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</diu>
https://codepen.io/Neizan/pen/XWJbVQY

Here's one way to do it:
*{
box-sizing:border-box; margin:0; padding:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc; padding:7px;
}
.container>h2{
background:#000; color:#fff; padding:3px 10px;
}
.flex{
background:#fff; font-size:16px; display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
}
.flex>div{
display:flex; border:1px solid #000; width:calc(25% - 5px); justify-content:center; align-items:center; text-align:center; border-top:0; border-left:0; padding:3px 5px;
}
.flex>div:nth-child(5n+1){
width:20px; border-left:1px solid #000;
}
.flex>div:first-child,.flex>div:first-child+div,.flex>div:first-child+div+div,.flex>div:first-child+div+div+div,.flex>div:first-child+div+div+div+div{
font-weight:bold; border-top:1px solid #000;
}
<div class='container'>
<h2>Resizable Columns</h2>
<div class='flex'>
<div>#</div>
<div>First Name</div>
<div>Nickname</div>
<div>Last Name</div>
<div>Username</div>
<div>1</div>
<div>Mark</div>
<div>Dude Meister</div>
<div>Otto</div>
<div>#mdo</div>
<div>2</div>
<div>Jacob</div>
<div>Barney von Matterhorn</div>
<div>Thornton</div>
<div>#fat</div>
<div>3</div>
<div>Larry the Bird</div>
<div></div>
<div>What</div>
<div>#twitter</div>
</div>

Related

How to avoid blank spaces in top of table in HTML

I am very new to HTML and I was tasked to delete blank spaces on top of table entries.
Currently, it's displaying like this.
enter image description here
I tried a couple of ways but not successfully. I really appreciate your guidance on this.
So it's displaying blank spaces before table data. Is it possible to remove that space..?
Here is my style sheet
<style type="text/css">
p {padding:0; margin:0} .container {font-family:'Arial Unicode MS'; font-size:10px; margin:0 auto; width:100%} .logo-title {overflow:hidden;font-size:10px} .logo-title .title-txt {float:right; width:50%; padding:30px 0 0 0; font-size:10px;} .logo-title .logo {float:left; width:50%;} .title{clear:both; text-align:center; font-size:18px} .Ts_and_Cs table {border: 1px solid #000000; border-collapse: collapse} .Ts_and_Cs table th {border: 1px solid #000000; background:#FFFFFF; color:#000000; text-align:center; font-size:10px} .Ts_and_Cs table td {border: 1px solid #000000; background:#FFFFFF; color:#000000; text-align:left; font-size:8px} .NoHeader {page:LastPage;page-break-before:always; page-break-inside: avoid;}#pageFooter:after { counter-increment: page; content: counter(page) " of " counter(pages);} #media print{ div.header { margin-top:50px; position: running(header); word-wrap: break-word; font-color: #000000; background:#FFFFFF; border: 1px solid #000000; } div.footer{ display: block; text-align:center; font-size:9px; position:running(footer);height:50px; } } #page { #top-center{ content:element(header);} margin-top:650px; margin-left:50px; margin-bottom:50px; margin-right:50px; #bottom-center {content: element(footer);} } #page LastPage{ #top-center{content: hidden;} margin-top:50px; margin-bottom:50px; margin-left:50px; margin-right:50px; #bottom-center {content: element(footer);}}</style>
My table data code with header
<table cellspacing="0" style="border:1px solid black; border-collapse:collapse; padding:10px;font-size:10px;text-align:center" width="100%">
<tbody>
<tr>
<td width="10%">
<strong>{{$D.Work_Order.SMAX_PS_Translation__c.SMAX_PS_Quantity__c}}</strong>
</td>
<td width="20%">
<strong>{{$D.Work_Order.SMAX_PS_Translation__c.SMAX_PS_Part_Number__c}}</strong>
</td>
<td width="40%">
<strong>{{$D.Work_Order.SMAX_PS_Translation__c.SMAX_PS_Part_Description__c}}</strong>
</td>
<td width="10%">
<strong>{{$D.Work_Order.SMAX_PS_Translation__c.SMAX_PS_Base_Price__c}}</strong>
</td>
<td width="10%">
<strong>{{$D.Work_Order.SMAX_PS_Translation__c.SMAX_PS_Discount__c}}</strong>
</td>
<td width="10%">
<strong>{{$D.Work_Order.SMAX_PS_Translation__c.SMAX_PS_Total_Price__c}}</strong>
</td>
</tr>
</tbody>
</table>
</div>
<!-- table 6 end --><!-- This is the end of the header -->
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-size:10px;text-align:left; page-break-inside: avoid;valign:top;" svmx-data="{{$D.Parts}}" width="100%">
<thead>
<tr>
<th style="text-align:left;valign:top;" svmx-data="{{$F.IF($D.Parts.SVMXC__Actual_Quantity2__c, $D.Parts.SVMXC__Actual_Quantity2__c, "N/A")}}" width="10%">
</th>
<th style="text-align:left;valign:top;" svmx-data="{{$F.IF($D.Parts.SMAX_PS_Part_Number__c, $D.Parts.SMAX_PS_Part_Number__c, "N/A")}}" width="20%">
</th>
<th style="text-align:left;valign:top;" svmx-data="{{$F.IF($D.Parts.SMAX_PS_Concat_Part_Work_Description__c, $D.Parts.SMAX_PS_Concat_Part_Work_Description__c, "N/A")}}" width="40%">
</th>
<th style="text-align:left;valign:top;" svmx-data="{{$F.IF($D.Parts.SVMXC__Actual_Price2__c, $F.FORMAT("{0}", $F.LNUMBER($D.Parts.SVMXC__Actual_Price2__c,2)), "N/A")}}" width="10%">
</th>
<th style="text-align:left;valign:top;" svmx-data="{{$F.IF($D.Parts.SMAX_PS_Calculated_Line_Discount__c, $F.FORMAT("{0}", $F.LNUMBER($D.Parts.SMAX_PS_Calculated_Line_Discount__c,2)), "N/A")}}" width="10%">
</th>
<th style="text-align:right;valign:top;padding-right:5px" svmx-data="{{$F.IF($D.Parts.SMAX_PS_CalculatedLinePrice__c, $F.FORMAT("{0}", $F.LNUMBER($D.Parts.SMAX_PS_CalculatedLinePrice__c,2)), "N/A")}}" width="10%">
</th>
</tr>
</thead>
</table>

How to regularly switching between two html divs using animation

I have html code with two divs containig tables with informations about departures and arrivals of airplanes as shown below. Second table is under first table but it is too big for screen and I need it to be displaying on the screen without scrolling. So I need to display just one table and switching between tables in regularly intervals (for example 30 seconds) using CSS animation or javascript.
Can anyone help me please?
CSS:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
body {
background-image: url("kosiceBackground.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1920px 1080px;
<!-- Neskor bude treba nastavit backgroung-size na 1920*1080 -->
}
h1 {
color: #3900ff;
text-align: center;
}
h4 {
color: #000000;
text-align: center;
}
h5 {
color: #ff0712;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
span {
color: #3900ff;
}
.table{
background-color: #3b3b3b !important;
/* border: 1px solid black !important;*/
opacity:0.8 !important;
color: whitesmoke !important;
border-radius: 20px;
}
.table td, .table th{
border-top: 1px solid black !important;
/* border-bottom: 1px solid black;*/
}
.table tr:first-child, .table th:first-child {
border-top: none !important;
}
</style>
Html:
<div class="row justify-content-center">
<div>
<div class="container" style="margin:50px">
<div class="row text-center"><h1 style="text-align: center; color: whitesmoke;">Departures</h1></div>
<table class="table table-striped">
<thead >
<tr >
<th style="border-top: none !important;">Airline</th>
<th style="border-top: none !important;">Estimated time</th>
<th style="border-top: none !important;">Scheduled time</th>
<th style="border-top: none !important;">Flight number</th>
<th style="border-top: none !important;">Status</th>
<th style="border-top: none !important;">Gate</th>
<th style="border-top: none !important;">To</th>
</tr>
</thead>
<tbody>
<c:forEach var="departure" items="${departuresArrivals.departures}">
<tr id="dep">
<td>${departure.airline}</td>
<td>${departure.estimated}</td>
<td>${departure.scheduled}</td>
<td>${departure.flightNumber}</td>
<td>${departure.status}</td>
<td>${departure.gate}</td>
<td>${departure.to}</td>
</tr>
</c:forEach>
<tr>
</tbody>
</table>
</div>
</div>
<div>
<div class="container" style="margin:50px">
<div class="row text-center"><h1 style="text-align: center; color: whitesmoke;">Arrivals</h1></div>
<table class="table table-striped">
<thead>
<tr>
<th style="border-top: none !important;">Airline</th>
<th style="border-top: none !important;">Estimated time</th>
<th style="border-top: none !important;">Scheduled time</th>
<th style="border-top: none !important;">Flight number</th>
<th style="border-top: none !important;">Status</th>
<th style="border-top: none !important;">From</th>
</tr>
</thead>
<tbody>
<c:forEach var="arrival" items="${departuresArrivals.arrivals}">
<tr>
<td>${arrival.airline}</td>
<td>${arrival.estimated}</td>
<td>${arrival.scheduled}</td>
<td>${arrival.flightNumber}</td>
<td>${arrival.status}</td>
<td>${arrival.from}</td>
</tr>
</c:forEach>
<tr>
</tbody>
</table>
</div>
</div>
Divs with tables have class=container.

You can use JavaScript AJAX to make it more restful. You can write functions called using buttons and switch between two <div> elements using those functions.

Fading out div to reveal a background image on hover

I am trying to make my jQuery so that the hover fades the span to reveal the bgSky div underneath but I can't get it to work. The CSS works but I want to animate it using JavaScript to make it look nicer. Here's the code:
HTML:
<div id="mainTbl">
<div id="bgSky">
<table id="menu">
<tr>
<td colspan="2"><span class="genAnchor"><img src="images/physicalArchives.png" class="genImages" style="width:55%;"/></span></td>
</tr>
<tr>
<td class="border"><span class="genAnchor"><img src="images/30s.png" class="genImages"/></span></td>
<td><span class="genAnchor"><img src="images/40s.png" class="genImages"/></span></td>
</tr>
<tr>
<td class="border"><span class="genAnchor"><img src="images/50s.png" class="genImages"/></span></td>
<td><span class="genAnchor"><img src="images/60s.png" class="genImages"/></span></td>
</tr>
<tr>
<td class="border"><span class="genAnchor"><img src="images/70s.png" class="genImages"/></span></td>
<td><span class="genAnchor"><img src="images/80s.png" class="genImages"/></span></td>
</tr>
<tr>
<td class="border"><span class="genAnchor"><img src="images/90s.png" class="genImages"/></span></td>
<td><span class="genAnchor"><img src="images/00s.png" class="genImages"/></span></td>
</tr>
<tr>
<td colspan="2"><span class="genAnchor"><img src="images/10s.png" class="genImages"/></span></td>
</tr>
</table>
</div>
</div>
CSS
html, body, div, span, table, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
padding: 0;
}
body{
background:#C71C2D;
text-align:center;
font-family:"Tw Cen MT",sans-serif;
}
h1{
color:white;
font-size:240%;
}
#logo{
height:30px;
width:298px;
position:absolute;
left:30px;
top:30px;
}
/*-- INDEX SETTINGS --*/
td{
padding-right:1;
padding-bottom:1;
}
tr{
border-top: 1px solid #9ea8a9;
border-bottom: 1px solid #9ea8a9;
}
#menu{
position:absolute;
top:0;
left:0;
border-collapse:collapse;
text-align:center;
margin:0 auto;
width:100%;
height:100%;
}
.border{
border-right:1px solid #9ea8a9;
}
a{
display:table;
position:relative;
width:100%;
height:100%;
}
.genAnchor{
display: table-cell;
border:1px solid white;
text-align:center;
vertical-align: middle;
background-color:rgba(255,255,255,1);
}
.genAnchor:hover{
background:rgba(0,0,0,0);
}
#mainTbl{
position:relative;
width:55%;
margin:10 auto;
padding:50px 0 50px;
height:75%;
background:white;
}
.genImages{
height:1in;
width:2.25in;
}
#bgSky{
position:relative;
background-image:url("images/sky.jpg");
background-size:cover;
width:70%;
height:100%;
margin:0 auto;
}
JS
$(function(){
$("td").hover(function(){
$(this).fadeOut(0.5, function(){
$(this).fadeIn();
});
});
});

Trying to make fixed table header in HTML, scroll and visibility issues?

I have been trying to make a table in HTML with a fixed header (and a horizontal scrollbar when necessary). This JSFiddle shows what I have so far:
html, body {
margin:0;
padding:0;
height:100%;
}
.horizontalscrollcontainer {
position: relative;
padding-top: 37px;
overflow:auto;
}
.verticalscrollcontainer {
background:transparent;
overflow-y:auto;
overflow-x:visible;
height: 200px;
}
table {
border-spacing: 0;
width:120%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: black;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div {
position: absolute;
background: transparent;
color: black;
padding: 9px 25px;
top: 0px;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div {
border: none;
}
<div class="horizontalscrollcontainer">
<div class="verticalscrollcontainer">
<table>
<thead>
<tr class="header">
<th>Table attribute name
<div>Table attribute name</div>
</th>
<th>Value
<div>Value</div>
</th>
<th>Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</div>
https://jsfiddle.net/byB9d/6248/
The problem I am having is that the horizontal scrollbar seems to go on the verticalscrollcontainer rather than the horizontalscrollcontainer. Is there any way to regulate this (the overflow-x is automatically set to auto because overflow-y is set to auto).
Thanks for any suggestions!

i guess you require this in css:
table thead{position:fixed;}
Fiddle

I would split into 2 sections and dictate the widths (% if responsive).
<table id="table-top">
<tr>
<th>A</th>
<th>B</th>
</tr>
</table>
<div id="table">
<table id="table_id">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
CSS....
#table{
overflow-y: auto;
height:150px;
border-bottom:1px solid grey;
}
table{
width:100%;
}
table td, table th{
border-color: grey;
border: 1px solid;
width:50%;
}
https://jsfiddle.net/tonytansley/mvp4u54q/

use this may help u
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.container {
position:relative;
background:transparent;
top:0px;
overflow:auto;
width: 100%;
height: 200px;
}
table {
border-spacing: 0;
width:120%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: black;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th:first-child div {
border: none;
}
.wrap {
width: 617px;
}
.wrap table {
width: 600px;
table-layout: fixed;
}
</style>
</head>
<body>
<div class="wrap">
<table class="head">
<tr>
<td>Table attribute name</td>
<td>Value</td>
<td>Description</td>
</tr>
</table>
<div class="container">
<table>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</table>
</div>
</div>

Found this fiddle... Looks perfect for you:
Uses a section to wrap the table [Not my work just providing the link]
<section class="">
Fiddle

https://jsfiddle.net/agpq359b/
not sure, it is what you want
<div class="container">
<table>
<thead>
<tr class="header">
<th>Table attribute name
</th>
<th>Value
</th>
<th>Description
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
</tbody>
</table>
</div>
html, body {
margin:0;
padding:0;
height:100%;
}
.container {
background:transparent;
overflow:auto;
width: 100%;
height: 200px;
}
table {
border-spacing: 0;
width:120%;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: black;
padding: 9px 25px
}
th:nth-of-type(1), td:nth-of-type(1){
width:200px;
}
th:nth-of-type(2), td:nth-of-type(2){
width:100px;
}
th:nth-of-type(3), td:nth-of-type(3){
width:200px;
}
td + td {
border-left:1px solid #eee;
}
thead {
position:absolute;
border: none;
top:0px;
}
tbody{
margin-top:38px;
display:block;
}

I think you best take the header out of the container:
<div class="xclass">
<table>
<thead>
<tr class="header">
<th>Table attribute name
<div class="headerdiv">Table attribute name</div>
</th>
<th>Value
<div>Value</div>
</th>
<th>Description
<div>Description</div>
</th>
</tr>
</thead>
</table>
</div>
Check this Fiddle - https://jsfiddle.net/byB9d/6241/

CSS table: How to position action buttons left to each row

I've this default responsive Bootstrap table:
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
How can I add a div or container to the right of each row showing some action buttons, like delete row, updating icon etc.? They should be hidden by default. When I mouse over a row, it should be displayed right to the row. Not inside the table, but the top and bottom should be aligned with the position and height of the given table row.
How can I solve this? If it cannot be done using CSS alone, a solution using jQuery/JavaScript or like could be okay.

Try the following code
$('tbody tr').hover(function(){
$(this).find('td:last').show();
},function(){
$(this).find('td:last').hide();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.table-bordered-custom{
border:0px;
border-top:initial;
}
.table-bordered-custom thead th {
border-top:1px solid #ddd !important;
}
.table-bordered-custom tbody td:last-child {
border:0 !important;
display:none;
}
</style>
<table style="margin:10px" class="table table-bordered table-bordered-custom">
<thead>
<tr>
<th width="10%">#</th>
<th width="25%">First Name</th>
<th width="25%">Last Name</th>
<th width="25%">Username</th>
<th style="border:0 !important" ></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td ><input type="button" value="X"> <input type="button" value="Edit"></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td ><input type="button" value="X"> <input type="button" value="Edit"></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<td ><input type="button" value="X"> <input type="button" value="Edit"></td>
</tr>
</tbody>
</table>

you may use hover and absolute to allow also tab crawling from a link to another :
td,th {
border:1px solid;
}
table {
margin:1em;
}
tr> :last-child {
width:1em;
vertical-align:top;
border:none;
}
:last-child a {
text-align:center;
position:absolute;
left:-9999px;
display:inline-block;
width:1em;
color:white;
text-decoration:none;
background:red;
}
tr:hover td:last-child a,td a:focus {
left:auto;
}
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td><a href>X</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td><a href>X</a></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<td><a href>X</a></td>
</tr>
</tbody>
</table>
</div>

Since you need complete width for the table and it should be responsive, you can keep the delete button inside last td(Username) and position it by getting few values from the hovered row using jQuery.
$('.table-bordered-custom tr')
.on('mouseenter', function () {
var offset = $(this).offset();
var top = offset.top;
var width = parseInt($('.table-responsive').css('width'),10);
var elem = $(this).find('span.delete');
var parent_padding_left = parseInt($('.table-responsive').parent().css('padding-left'),10)
elem.css({
"top": top + "px",
"left": (width + parent_padding_left) - 1 + "px",
"display": "inline"
});
})
.on('mouseleave', function () {
$('span.delete').css({
"display": "none"
})
});
span.delete {
display: none;
position: absolute;
background: crimson;
color: #fff;
cursor: pointer;
padding: 9px 12px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<section id="content">
<div class="col-xs-8 col-xs-offset-2">
<div class="table-responsive">
<table class="table table-bordered table-bordered-custom">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo<span class="delete">x</span>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat<span class="delete">x</span>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter<span class="delete">x</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>

imho so many difficult answers, I would do it with an easy aproach.
In this JSFIDDLE I just add a display:none cell to each row with whatever buttom you want to show inside and with no borders so it won't look at all as inside the table, then :
tr:hover .buttom {display:table-cell;}
may do the trick.
and no idea why I have the feeling this may not be what you want (bounty question so many javascript answers and such)... but as much as I reread the question this is it.
Excuse my poor english
Edited: Btw, if you really want the buttoms outside the "responsive" table so you have your border around, it's easily done with absolute positioned, but you shoudn't really do it. Once the table goes 100% of the window width, then those buttoms you want won't be visible for the user.
Edited: When the "buttom" cell is displayed as none, it won't take the fixed 40px width we need (or whatever future width you need once you have all buttoms inside) so I set the width to .X0 insteed becuase this element is there (but with no border, style or content) and will make all the column the same width.
Then I just overwrite some bootstrap styles that were messing with the table. (Please notice that something like:
.table-responsive {border:0; padding:2px;}
.table-bordered {border:0;}
may affect all your project so be sure you just overwrite the styles in this table and non others. Use something like:
.container-of-the-table-with-buttoms .table-responsive {border:0; padding:2px;}
Fiddle has been updated

I quickly wrote some code that might help you get started :
HTML
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="actionbuttons"></div>
CSS
.actionbuttons
{
position:absolute;
width: 150px;
height: 30px;
background: #f00;
display:none;
}
jQuery code
$('tbody tr').on('mouseover',function(){
var rowPosition = $(this).position();
var targetPosition = {
top: rowPosition.top,
left: rowPosition.left + $(this).width()
}
$('.actionbuttons').css(targetPosition);
$('.actionbuttons').show();
});
$('tr').on('mouseout',function(){
$('.actionbuttons').hide();
});
The fiddle

try adding an onmouseover and an onmouseout attribute to each row of the table. Use each to make the button visible and invisible.
<tr onmouseover="
*insert code to make button for this row visible*
" onmouseout="
*insert code to make button for this row invisible*
">
*insert table data for this row*
</tr>

Use this:
$('tr').hover(function(){
$('div').removeClass('hide');
$('div').addClass('open');
})
CSS:
.open {
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: -500px;
width: 500px;
opacity: 1;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.close {
background: yellow;
height: 300px;
position: absolute;
top: 0;
left: -500px;
width: 500px;
opacity: 1;
-webkit-transition: all 0.7s ease-in;
-moz-transition: all 0.7s ease-in;
-ms-transition: all 0.7s ease-in;
-o-transition: all 0.7s ease-in;
transition: all 0.7s ease-in;
}
Hope it Works!

You can also play a little with CSS3 transform, transition and eventually FontAwesome to obtain a:
Pure CSS3 solution ( NO JavaScript, NO images )
td {
background: white;
}
th.buttons {
display: none;
}
td.buttons {
border: none !important;
padding: 0px !important;
z-index: -1;
transform: translateX(-100%);
transition: transform .5s ease 0s, z-index .1s ease 0s;
}
tr:hover td.buttons {
transform: translateX(0%);
z-index: 1;
transition: transform .5s ease 0s, z-index .01s ease .5s;
}
.buttons ul {
text-align: left;
margin: 0;
padding: 0;
}
.buttons ul li {
display: inline-block;
min-height: 100%;
text-align: center;
}
.buttons a {
border-radius: 2px;
color: red;
display: block;
font-size: 16px;
line-height: 100%;
min-width: 5em;
text-decoration: none !important;
transition: background 0.3s ease 0s;
}
.buttons i {
display: block;
font-size: 1.5em;
}
.buttons span {
font-family: sans-serif;
font-size: 0.625em;
text-transform: uppercase;
}
li:hover a {
background: red;
color: white;
z-index: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th class="buttons"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td class="buttons">
<ul>
<li><i class="fa fa-pencil-square-o"></i><span>update</span>
</li><!--
--><li><i class="fa fa-times"></i><span>delete</span>
</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td class="buttons">
<ul>
<li><i class="fa fa-pencil-square-o"></i><span>update</span>
</li><!--
--><li><i class="fa fa-times"></i><span>delete</span>
</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<td class="buttons">
<ul>
<li><i class="fa fa-pencil-square-o"></i><span>update</span>
</li><!--
--><li><i class="fa fa-times"></i><span>delete</span>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
Note: the <li> are connected by HTML comments (<!-- -->) to prevent the inline-block spacing problem.

We Keep Coding

JavaScript is the programming language of the Web.