6 Replies Latest reply: Apr 9, 2013 1:25 PM by dwdivazona RSS

    Excessive line spacing in a table

    dwdivazona Community Member

      I am having issues with excessive spacing in the lines of my table. I have reduced cellPadding and cellSpacing to "0" but I still get an enormous amount of space between the lines. In DesignView, it looks the way I want it:

       

      design_view.PNG

       

      But in LiveView and in any browser, the spacing is too big:

       

      live_view.PNG

       

      Do I need to address this is CSS and if so, how do I address it?

        • 1. Re: Excessive line spacing in a table
          Jon Fritz II CommunityMVP

          Without seeing the code, it's hard to say exactly what's going on. However, if I had to guess, I would say that the element wrapping your text in each cell (likely a set of <p> tags) has the margin/padding on it and is causing the expansion.

           

          To get rid of the default <p> margin and padding that browsers add, you can add this to your css...

           

          table p {

               margin:0;

               padding:0;

          }

           

          This way, only the <p> tags that are also in a table lose their padding and margin.

           

          If that doesn't help, could you post a link to your page?

          • 2. Re: Excessive line spacing in a table
            dwdivazona Community Member

            That didn't seem to do the trick.

             

            The address is: zonaproperties.toscawebdesign.com/rentals.html

             

            Thanks for checking it out.

            • 3. Re: Excessive line spacing in a table
              Jon Fritz II CommunityMVP

              That is definitely the problem though. When I added in

               

              style="margin:0; padding:0;"

               

              To each of the first rows <p> tags, it fixed the issue. You must have something later in one of your  many .css files that is overriding it. (Is there any particular reason you have 8 different external .css files on that one simple page?)

               

              Try adding this as  to the <head> section as embedded css for that page...

               

              <style type="text/css">

              #apartments p {

                   margin:0;

                   padding:0;

              }

              </style>

               

               

              Then add the bold below to the <table> tag...

               

              <table id="apartments" width="674" border="0" cellspacing="0" cellpadding="0">

              • 4. Re: Excessive line spacing in a table
                dwdivazona Community Member

                Thanks so much for the detailed information. I tried it all but I can't seem to fix it. That page is based on a template so I had to add the inline style type to the template. I also add the CSS rule #apartments p to the last main external CSS (mainTemp.css). I tried adding the inline style to each of the <p> of the first several lines of the table but for some reason, none of these things have made a difference. Any other suggestions?

                • 5. Re: Excessive line spacing in a table
                  Nancy O. CommunityMVP

                  Problem is caused by all those lists.  If you strip out all the unecessary lists, span and strong tags, you'll have an easier time with this.  Use <th> tags for headings. 

                  Copy and paste this code into a new document:

                   

                   

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                  <title>Table</title>
                  <style type="text/css">
                  table {
                  border-collapse: collapse;
                  border: none;
                  }
                  
                  th {
                  text-align: left;
                  padding-top: 20px;
                  }
                  
                  td:first-child { text-indent: 25px; }
                  </style>
                  </head>
                  
                  <body>
                  <table width="674" cellspacing="0" cellpadding="0">
                  <tr>
                  <th width="374">Studio</th>
                  <th width="253">Rent</th>
                  <th width="332">Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=1361+Lake+Ave%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14613&country=us" target="_blank">1361 Lake Ave</a></td>
                  <td>$460 includes heat</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <th>One Bedroom</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=1361+Lake+Ave%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=Rochester+ny+14513;country=us" target="_blank">1361 Lake Ave</a></td>
                  <td>$560 includes heat</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=1117+South+Plymough+Ave%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=Rochester+ny+14508;country=us" target="_blank">1117 S. Plymouth Ave</a></td>
                  <td>$525 plus utilities</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <th>Two Bedroom</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=42+Nye+Park%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14621&country=us" target="_blank">42 Nye Park</a></td>
                  <td>$600 plus utilities</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <th>Three Bedroom</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=42+Ave+A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14621;country=us" target="_blank">42 Ave A</a></td>
                  <td>$650 plus utilities</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=39+Washburn+Pk%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14620;country=us" target="_blank">39 Washburn Pk</a></td>
                  <td>$875 plus utilities</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=1103+South+Clinton+Ave%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14620;country=us" target="_blank">1103 S. Clinton Ave</a></td>
                  <td>$700 plus utilities</td>
                  <td> </td>
                  </tr>
                  <tr>
                  <th>Four Bedroom</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td>None at this time </td>
                  <td> </td>
                  <td> </td>
                  </tr>
                  <tr>
                  <th>Single Family Homes</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=981+Exchange+St%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14608;country=us" target="_blank">981 Exchange St</a></td>
                  <td>$850 plus utilities</td>
                  <td>3 bedrooms</td>
                  </tr>
                  <tr>
                  <th>Garages for Rent</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=93+Prince+St%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14605&country=us" target="_blank">93 Prince St</a></td>
                  <td>$75 per month</td>
                  <td>2 car garage</td>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=59+Edmonds+St%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14607&country=us" target="_blank">59 Edmonds St</a></td>
                  <td>$50 per month</td>
                  <td>storage only</td>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=99+Orange+St%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14608&country=us" target="_blank">99 Orange St</a></td>
                  <td>$50 per month</td>
                  <td>storage only</td>
                  </tr>
                  <tr>
                  <th>Store Fronts for Rent</th>
                  <th>Rent</th>
                  <th>Comments</th>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=166+Genesee+St%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14611&country=us" target="_blank">166 Genesee St</a></td>
                  <td> </td>
                  <td> </td>
                  </tr>
                  <tr>
                  <td><a href="http://us.rd.yahoo.com/maps/us/insert/Tmap/extmap%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20/*-http://maps.yahoo.com/maps_result?addr=168+Genesee+St%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&csz=rochester+ny+14611&country=us" target="_blank">168 Genesee St</a></td>
                  <td> </td>
                  <td> </td>
                  </tr>
                  </table>
                  </body>
                  </html>
                  
                  

                   

                  Nancy O.

                  • 6. Re: Excessive line spacing in a table
                    dwdivazona Community Member

                    As ever, you are a genius, Nancy O.!