Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Jul 2018
    Posts
    3
    Member #
    59489

    How to remove spaces at bottom of table/td s ?

    Hello and Thanks ,
    I am having a problem with extra spaces (blank lines) at the botttom of css,table,td elements.
    I used a
    Code:
    td.VaTop { vertical-align: top; }
    to remove extra spaces at top of table . But now I need to remove spaces at bottom of table .
    Code:
       <!DOCTYPE html>
        <html  lang="en">
        <head>
        <title>Table Margins</title>
        <style>
        .button{
        background-color: #282A36;
        border: none;
        color: #C8982B;
        color: #D9B04E;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        font-family: "Comic Sans MS", cursive, sans-serif ;
        font-size: 24px;
        cursor: pointer;
        }    
        span.RedTxt{
        color: red;
        }
        table.center {
        margin-top:1px;
        margin-right:auto; 
        margin-left:auto;      
        border-collapse: collapse; 
        }
        table { border-spacing: 0; }
        td { padding: 0; }
        table { border: 8px solid #D9B04E;
        width: auto;
        height: auto;   
        }
        td.VaTop { 
        vertical-align: top;
        }
        #DivWholePage {  border: 24px solid #282A36;
        }
        </style>
        </head>
        <body>
        <div id="DivWholePage">
        <div id="TopRightImage" style="text-align:center;">      
        <br><button class="button">Dancing Man Kit -Docs & Pics</button>
        </div> <!-- TopRightImage  -->   
        <br><br>
        <!-- =====================NEW TABLE==================== -->
    	<table  class="center" style="text-align: left; height:100vh;">
        <tbody>
        <tr> 
        <td class="VaTop" >
        img src="Arms-1.png" alt="SmileyFace.png">
        <br>
        <br>&nbsp;  &nbsp;  &nbsp;  
        Attaching Arms 
        </td>
        <td class="VaTop">  
        <br><br>     Attaching Arms :
        <br><br> Notice how the forearms turn out and away from the body .        
        <br>The purpose of this is so that the arms don't collide with the body
        <br>as they swing while dancing .
        <br> as shown in the photo to left . 
        </td> 
        </tr>      
        </tbody>
        </table>
        </div> <!--  <div id="DivWholePage">  -->
        </body>
        </html>
    Pls help , an example would be great , Thanks
    Last edited by vmars.us; Jul 12th, 2018 at 07:33 PM. Reason: better wording

  2.  

  3. #2
    Junior Member
    Join Date
    Jul 2018
    Posts
    3
    Member #
    59489

    Turns out all I needed to do was to get rid of this:

    Turns out all I needed to do was to get rid of this:
    height:100vh;

    Code:
        <!DOCTYPE html>
        <html  lang="en">
        <head>
        <title>Table Margins</title>
        <style>
        *{margin: 0; padding: 0;}
        .button{
        background-color: #282A36;
        border: none;
        color: #C8982B;
        color: #D9B04E;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        font-family: "Comic Sans MS", cursive, sans-serif ;
        font-size: 24px;
        cursor: pointer;
        }    
        span.RedTxt{
        color: red;
        }
        table.center {
        margin-top:1px;
        margin-right:auto; 
        margin-left:auto;      
        border-collapse: collapse; 
        margin-bottom:0px;
        }
        table { border-spacing: 0; }
        
        td { padding: 0; }
        table { border: 8px solid #D9B04E;
        width: auto;
        height: auto;   
        margin: 0px;
        padding: 0px;
        }
        td.VaTop { 
        vertical-align: top;
        }
        #DivWholePage {  border: 24px solid #282A36;
        }
        </style>
        </head>
        <body>
        <div id="DivWholePage">
        <div id="TopRightImage" style="text-align:center;">      
        <br><button class="button">Dancing Man Kit -Docs & Pics</button>
        </div> <!-- TopRightImage  -->   
        <br><br>
        <!-- =====================NEW TABLE==================== -->
    	<table  class="center" style="text-align: left;">
        <tbody>
        <tr> 
        <td class="VaTop" >
        <img src="Arms-1.png" alt="SmileyFace.png">
        <br>
        <br>&nbsp;  &nbsp;  &nbsp;  
        Attaching Arms 
        </td>
        <td class="VaTop">  
        <br><br>     Attaching Arms :
        <br><br> Notice how the forearms turn out and away from the body .        
        <br>The purpose of this is so that the arms don't collide with the body
        <br>as they swing while dancing .
        <br> as shown in the photo to left . 
        </td> 
        </tr>      
        </tbody>
        </table>
        </div> <!--  <div id="DivWholePage">  -->
        </body>
        </html>
    Thanks


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 03:15 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com