Member Avatar for earlxph8

Problem:
There is space gap between the rows, in its output:

Goal:
I want to reduce the gap, so it will show the normal format

/* CSS */
.spantxt{   display: table-cell;}
.dotuline{  display: table-cell;    border-bottom-style: dotted;    border-bottom-width:2px;    }
.box{ width:700px;height:700px;padding:30px;border:1px solid black;margin:1px;display:table;}



 <div class="box" align="left">
<table width="100%" border="0"  >
        <tr>
            <td width="45%" >
            <p><span class="spantxt" style="width:20px">Alias: </span>
            <span class="dotuline"><?php echo $alias; ?></span></p></td>
            <td width="5%"></td>
            <td>
            <p><span class="spantxt" style="width:100px">Family Name: </span>
            <span class="dotuline"><?php echo $lastname; ?></span></p></td>
        </tr>

        <tr>
            <td><p><span class="spantxt" style="width:90px">Date of Birth: </span>
            <span class="dotuline"><?php echo $dateofbirth; ?></span></p></td>
            <td></td>
            <td><p><span class="spantxt" style="width:90px">Place of Birth: </span>
            <span class="dotuline"><?php echo $placeofbirth; ?></span></p></td>
        </tr>   
    </table>
    </div>

Thanks.

  • 5 Contributors
  • 10 Replies
  • 341 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Biiim
Member Avatar for simplypixie

Try adding cellpadding=0 and cellspacing=0 to your table element:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
Member Avatar for earlxph8

i tried using cellpadding and cellspacing, it did reduce but very minimal. still has some space gaps. tnx

Member Avatar for JorgeM

The "gap" that you see is because you have a block element (<p>) within your table cells. If you do not want the paragraph elements to behave in that manner, then display them as inline elements. Here is an updated version of your code. In addition, I for the table element, I typically apply the border-collapse property to remove the cellspacing and cellpadding. For this example, i removed the PHP related tags so I could render the variable names.

<!doctype html>
<html>
<head>
<style>
.spantxt {display: table-cell;}
.dotuline {display: table-cell;border-bottom-style: dotted;border-bottom-width:2px;}
.box {width:700px;height:700px;padding:30px;border:1px solid black;margin:1px;display:table;}
table {border-collapse:collapse;width:100%;}
p {display:inline;}
</style>
</head>

<body>
<div class="box" align="left">
<table>
        <tr>
            <td width="45%" >
            <p><span class="spantxt" style="width:20px">Alias: </span>
            <span class="dotuline">$alias;</span></p></td>
            <td width="5%"></td>
            <td>
            <p><span class="spantxt" style="width:100px">Family Name: </span>
            <span class="dotuline">$lastname;</span></p></td>
        </tr>
        <tr>
            <td><p><span class="spantxt" style="width:90px">Date of Birth: </span>
            <span class="dotuline">$dateofbirth;</span></p></td>
            <td></td>
            <td><p><span class="spantxt" style="width:90px">Place of Birth: </span>
            <span class="dotuline">$placeofbirth;</span></p></td>
        </tr>   
    </table>
    </div>
</body>
</html>
Member Avatar for earlxph8

@JorgeM
display: inline and collapse works great and this solves also my printing problem where it reduces and prints in one page,

but last problem is that i need my border bottom like table where it displays all inside it without having the problem of space gaps again.

thanks.

Edited by earlxph8 because: additional comment
Member Avatar for code739

yes you could have border without affecting space gaps because border already collpased

Member Avatar for earlxph8

forgot to add this info:

if i use

p {display:inline;}

it will only display with the element not the whole table, i want to maximize the border-bottom 100%, but if i use

display:table

the space gaps is showing again even if the table is collapse

Member Avatar for earlxph8

additional, sorry i cant edit my posts,

i just want my border-bottom to expand or maximize to 100% for my PHP value, before i use
the p{display:inline;} it works likes this, but i need this 'p' to reduce the space gaps.

Member Avatar for JorgeM

but last problem is that i need my border bottom like table where it displays all inside it without having the problem of space gaps again.

Sorry, I do not understand what this means.

Member Avatar for Biiim

Code sanity has been restored, bar the p tag's class name - I let that one through

<style type='text/css'>
.spanp{display: inline-block;margin:0;}
.dotuline{display: inline-block;border-bottom-style: dotted;border-bottom-width:2px;margin:0;}
.box{ width:700px;padding:30px;border:1px solid black;margin:1px;display:block;}
</style>
<div class="box" align="left">
<table width="100%" border="0">
    <!--<?php //while($row = mysql_fetch_assoc($res)){?>-->
    <tr>
        <td width="45%" >
            <p class="spanp" style="width:20px">Alias:</p>
            <p class="dotuline"><?php echo $alias; ?></p>
        </td>
        <td width="5%"></td>
        <td>
            <p class="spanp" style="width:100px">Family Name: </p>
            <p class="dotuline"><?php echo $lastname; ?></p>
        </td>
    </tr>
    <!--<?php //}?>-->
    <tr>
        <td>
            <p class="spanp" style="width:90px">Date of Birth: </p>
            <p class="dotuline"><?php echo $dateofbirth; ?></p>
        </td>
        <td></td>
        <td>
            <p class="spanp" style="width:90px">Place of Birth:</p>
            <p class="dotuline"><?php echo $placeofbirth; ?></p>
        </td>
    </tr>   
</table>
</div>
Edited by Biiim because: made more like what was asked
Member Avatar for Biiim

i just want my border-bottom to expand or maximize to 100% for my PHP value, before i use
the p{display:inline;} it works likes this, but i need this 'p' to reduce the space gaps.

After seeing this im not sure what you are wanting - maybe describe what you are trying to create as an end product rather than how you are wanting to achieve it

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.