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.

Recommended Answers

All 10 Replies

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

<table width="100%" border="0" cellpadding="0" cellspacing="0">

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

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>

@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.

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

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

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.

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.

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>

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.