We Keep Coding

Re-sizable flex table in HTML

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>

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();
});
});
});

how to give space between tr tag and divide by | in html

Hi in the below code how to give the space to two tr rows and i want to divide with this symbol.and background color should occupy the full table.first row no need this | i want to divide all the left side row with full | symbol and then right side td's
can any one help me
Expected output:
About Us | Latest News
Facilities Events
Doctors Gallery
Our Blogs Contact Us
html
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>
css
#slider1 footer {
background-color:#00008B;
width:100%;
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}

see this: http://jsfiddle.net/ze0587d0/
#slider1 footer {
width:100%;
}
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}
td{
padding:5px;
}
.border-right{
border-right:1px solid #000;
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class='border-right'>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>
just add a class for the first td, where you want | sign, and the css border-right:1px solid #000;
Edit:
According to the comment by OP,
If you want all td's having a saperation with |, see this: http://jsfiddle.net/ze0587d0/2/
you need to add a border-right to all tds which are first-child of tr,
tr td:first-child{
border-right:1px solid #000;
}
#slider1 footer {
width:100%;
}
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}
tr td:first-child{
border-right:1px solid #000;
}
td{
padding:5px;
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td >About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>

I think this is what you are after...it uses your pseudo-element but positions it absolutely.
#slider1 footer {
background-color: #00008B;
width: 100%;
color: white;
}
#slider1 table {
table-layout: fixed;
}
#slider1 footer tr td {
padding: 0 1rem;
position: relative;
}
#slider1 footer tr:first-of-type td:first-child:after {
position: absolute;
right: 0;
content: "|";
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>

jQuery fadeToggle causes table border to appear

Please refer to this JSFiddle
I am using tablesorter to sort a table. I am also using fadeToggle on the first column of the table to show/hide hidden rows associated with each row.
I want the header of the table to have a border around each cell. The rest of the table should have border-collapse: collapse. It is great on page load and while sorting but as soon as you click to toggle a hidden row, the border shows up on all cells and remains until you resort the table.
I can't seem to find out where the style is getting inherited from after the toggle...
My HTML is:
<table cellspacing=4 cellpadding=2>
<tr>
<td valign='top'>
<div>
<table id="spidtable" class='tablesorter' cellspacing=1 cellpadding=5>
<thead>
<th align=left style="width:100px">SPID</th>
<th align=left style="width:200px">Name</th>
<th align=center style="width:60px">State</th>
<th align=center style="display:none;"> </th>
<th align=center style="width:100px">Duration</th>
<th align=center style="width:100px">Transitions</th>
<th align=center style="width:100px" title="UDM=Number of Degraded Minutes">UDM</th>
<th align=center style="width:100px" title="UIM=Number of Interrupted Minutes">UIM</th>
</thead>
<tbody>
<tr class="parent-row">
<td class="tdd" align=right>11111</td>
<td align=left>Chief Technologies</td>
<td align=center><img border=0 src=/img/green.gif></td>
<td style="display:none;">1</td>
<td align=left></td>
<td align=right>0</td>
<td align=right>0</td>
<td align=right>0</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1 /13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td> <td>6:00AM</td></tr> </tbody> </table> </td> </tr>
<tr class="parent-row">
<td class="tdd" align=right>33333</td>
<td align=left>BBBBBBBBBBB</td>
<td align=center><img border=0 src=/img/green.gif></td>
<td style="display:none;">1</td>
<td align=left></td>
<td align=right>0</td>
<td align=right>0</td>
<td align=right>0</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1/13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td> <td>6:00AM</td></tr> </tbody> </table> </td> </tr>
<tr class="parent-row">
<td class="tdd" align=right>77777</td>
<td align=left>ZZZZZZZZZZZ</td>
<td align=center><img border=0 src=/img/green.gif></td>
<td style="display:none;">1</td>
<td align=left></td>
<td align=right>0</td>
<td align=right>0</td>
<td align=right>0</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1/13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td><td>6:00AM</td></tr> </tbody> </table> </td> </tr>
<tr class="parent-row">
<td class="tdd" align=right>44444</td>
<td align=left>GGGGGGGGGGG</td>
<td align=center><img border=0 src=/img/green.gif></td>
<td style="display:none;">1</td>
<td align=left></td>
<td align=right>0</td>
<td align=right>0</td>
<td align=right>0</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1/13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td><td>6:00AM</td></tr> </tbody> </table> </td> </tr>
</tbody></table></div></td><td valign='top'><div id='divSpid'></div></td></tr></table>
And my CSS is:
/* tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 12pt;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: white;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter thead tr .headerSortUp {
background: url(http://tablesorter.com/themes/blue/desc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown {
background: url(http://tablesorter.com/themes/blue/asc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
table.tablesorter tr.parent-row > td {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #253355 0%, #587993 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #253355 0%, #587993 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #253355 0%, #587993 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #253355), color-stop(1, #587993));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #253355 0%, #587993 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #253355 0%, #587993 100%);
}
table.tablesorter tr.parent-row-details > td {
background: grey;
}
table.tablesorter-child thead tr th, table.tablesorter tfoot tr th {
background-color: #e6E66E;
border: 1px solid #FFF;
font-size: 18pt;
padding: 4px;
}
table.tablesorter-child tbody tr td {
color: black;
}

For me the problem was with using css border-collapse setting. To fix the problem I had to set the table's cellspacing equal to 0.