We Keep Coding

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>

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>

Jquery background slide down

I was wondering if it is possible to change make the div follow the size of its table cell? At the moment I can only display something above another div. This is what I have so far.
https://jsfiddle.net/amosangyongjian/mmqasf5t/54/
$(document).ready(function(){
$("td").hover(function(){
$(this).find(".expand").slideDown("slow");
},function(){
$(this).find(".expand").slideUp("slow");
});
});

jsFiddle example
td {
width:100px;
height:100px;
position:relative; /* ADD THIS */
}
.expand {
display:none;
position:absolute;
top:0; left:0; width:100%; height:100%; /* ADD */
z-index:1;
background:red;
/*height:auto; width:100%; REMOVE */
overflow:hidden;
}
.static {
position:absolute;
z-index:0;
background:yellow;
text-align:center;
}
And here's a much cleaner solution with some minor changes in HTML, CSS, jQuery
jQuery(function( $ ) {
$("td").hover(function() {
$(this).find(".expand").stop().slideToggle("slow");
});
});
td {
width:100px;
height:100px;
position:relative;
}
.expand {
display:none;
position:absolute;
top:0; left:0; width:100%; height:100%;
background:red;
overflow:hidden;
}
.static {
position:absolute;
background:yellow;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tableclass">
<tr>
<td>
<div class="static">Hello1</div>
<div class="expand">Expanded</div>
</td>
<td>
<div class="static">Hello2</div>
<div class="expand">Expanded</div>
</td>
</tr>
<tr>
<td>
<div class="static">Hello3</div>
<div class="expand">Expanded</div>
</td>
<td>
<div class="static">Hello4</div>
<div class="expand">Expanded</div>
</td>
</tr>
</table>
and here's another example that uses no JavaScript at all
but CSS3 transition from height:0; to height:100%;
td {
width:100px;
height:100px;
position:relative;
}
.static {
position:absolute;
background:yellow;
text-align:center;
}
.expand {
position:absolute;
overflow:hidden;
top:0; left:0; width:100%; height:0;
background:red;
transition: 0.5s;
}
td:hover .expand{
height:100%;
}
<table border="1" id="tableclass">
<tr>
<td>
<div class="static">Hello1</div>
<div class="expand">Expanded</div>
</td>
<td>
<div class="static">Hello2</div>
<div class="expand">Expanded</div>
</td>
</tr>
<tr>
<td>
<div class="static">Hello3</div>
<div class="expand">Expanded</div>
</td>
<td>
<div class="static">Hello4</div>
<div class="expand">Expanded</div>
</td>
</tr>
</table>

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>

Accordian menu (when clicked) affects position of an image in the next table cell

I'm using an accordion menu I found on a CSS resource page.
The menu works fine - the only problem is:
I have an image that's right next to the menu (the image and the accordion menu are in their own separate table cell), and whenever the accordion menu is clicked, the image will shift downwards along with the accordion effect.
I basically need the image to stay where it is (valign middle) and not move around whenever the accordion menu is clicked.
I have very bare basic knowledge of HTML and this is issue is driving me nuts :(
Hope someone can help me out - thank you in advance!
This is the CSS:
.container {
width:360px;
font-family:'Varela Round', Arial, Helvetica, sans-serif;
margin:0 auto;
padding:0 0 20px;
}
.accordion {
font-size:13px;
border-radius:10px;
width:360px;
padding:10px;
background:none;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
display:block;
font-size:13px;
line-height:16px;
background:#10967a;
color:#ffffff;
cursor:pointer;
text-transform:uppercase;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
background:#39bc86;
color:#FFF;
}
.accordion .content {
padding:0 10px;
overflow:hidden;
border:1px solid #fff; /* Make the border match the background so it fades in nicely */
background:#FFFFFF;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color:#333;
margin:0 0 10px;
}
.accordion h3 {
color:#542437;
padding:0;
margin:10px 0;
}
/* Vertical */
.vertical ul li {
overflow:hidden;
margin:0 0 1px;
}
.vertical ul li label {
padding:8px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
border-bottom:0;
}
.vertical ul li .content {
height:0px;
border-top:0;
}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {
height:250px;
}
This is the HTML:
<body>
<table width="1010" border="0" background="images/bg.jpg">
<tr>
<td height="380" align="left" valign="top"><table width="1010" border="0">
<tr>
<td width="56"> </td>
<td width="320"><table width="100%" border="1">
<tr>
<td><img src="../images/pdt_01.jpg" width="181" height="205" /></td>
</tr>
</table></td>
<td width="360" valign="top"><div class="container">
<div class="accordion vertical">
<ul>
<li>
<input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
<label for="checkbox-1"><strong><span class="text">ADDRESSES</span></strong></label>
<div class="content">
<table width="100%" border="0" cellpadding="0" cellspacing="8">
<tr>
<td valign="top" class="list">6767 S Clinton St</td>
</tr>
<tr>
<td valign="top" class="list">16910 E Quincy Ave</td>
</tr>
<tr>
<td valign="top" class="list">5010 Founders Pkwy</td>
</tr>
<tr>
<td valign="top" class="list">9390 W Cross Dr</td>
</tr>
<tr>
<td valign="top" class="list">1985 Sheridan Blvd</td>
</tr>
<tr>
<td valign="top" class="list">1630 E Cheyenne Mountain Blvd</td>
</tr>
</table>
</div>
</li>
<li>
<input type="checkbox" id="checkbox-2" name="checkbox-" />
<label for="checkbox-2"><strong><span class="text">MORE</span></strong></label>
</li>
</ul>
</div>
</div></td>
<td width="350"> </td>
</tr>
</table></td>
</tr>
</table>
</body>
Are there any other info that you need?

As you are saying that image is valign="middle", so it's working fine B'coz whenever menu expands table height also increases with menu and image is adjusting itself in the middle.
but you can try valign="top" in "td" which is holding the image table . like below
<td width="320" valign="top">
<table width="100%" border="1">
<tr>
<td><img src="../images/pdt_01.jpg" width="181" height="205" /></td>
</tr>
</table>
</td>
if it is not necessary to make it valign="middle" you can use it...
http://jsfiddle.net/t8NDN/