0

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
13
Views
5 Years
Discussion Span
Last Post by Biiim
0

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

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

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

0

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>
0

@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: additional comment

0

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

0

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.

0

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.

0

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: made more like what was asked

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.