CODEWITHSUNDEEP
htmlcss
user4687376
user4687376

Reputation:

HTML space between buttons in table

I have created a table which contains two buttons in each of the rows and both of the buttons are jointed together, I want to seperate both of the buttons. I have used    which does does not work and css aswell, is their another way.

I have another problem as I dont want to display the action buttons inside table border, but outside it near the table.

<table style="border:2px solid white; cellpadding=10 cellspacing=0">
    <tr style="background:#00B050;color:#fff;">
	
        <th>Name</th>
        <th>Image</th>
        <th>Description</th>
        <th>Contact Renter</th>
        <th>Rent price</th>
		<th>Action</th>
    </tr>

<?php
    while($row = mysql_fetch_array($result)) {
?>
    <tr>
        <td><?php echo $row['productname'];?></td>
        <td><img src='./images/products/<?php echo $row["productimage"];?>' width='150' height='100' alt=''></td>
        <td><?php echo $row['productdescription'];?></td>
        <td><?php echo $row['rentersdetails'];?></td>
        <td><?php echo $row['rentprice'];?></td>
		<td>
     <input class="button_normal" type="button" value="Find Renter" onclick="window.open('https://www.google.co.uk/maps/')"/>
	 <input class="button_normal" type="button" value="Mail Renter" onclick="window.open('mailto:')"/>
  </td>   
    </tr>
<?php

Upvotes: 0

Views: 2754

Answers (1)

Rvervuurt
Rvervuurt

Reputation: 8963

Ok, so if I understand correctly, you want the buttons to be "outside" of the table. You could do this by targeting the last th and td and remove borders and backgroundcolors (just hide the th). It will still be IN the table, but won't look like that.

In the below, edited snippet, you can see I've added some in-line styling. It's better to work with an external stylesheet, so be sure to target the right th and input! Check out :nth-child()-selector as a possible solution.

<table style="border:2px solid white; cellpadding=10 cellspacing=0">
    <tr style="background:#00B050;color:#fff;">
	
        <th>Name</th>
        <th>Image</th>
        <th>Description</th>
        <th>Contact Renter</th>
        <th>Rent price</th>
		<th style="display:none">Action</th>
    </tr>

<?php
    while($row = mysql_fetch_array($result)) {
?>
    <tr>
        <td><?php echo $row['productname'];?></td>
        <td><img src='./images/products/<?php echo $row["productimage"];?>' width='150' height='100' alt=''></td>
        <td><?php echo $row['productdescription'];?></td>
        <td><?php echo $row['rentersdetails'];?></td>
        <td><?php echo $row['rentprice'];?></td>
		<td style="min-width:200px">
     <input class="button_normal" type="button" value="Find Renter" onclick="window.open('https://www.google.co.uk/maps/')"/>
	 <input style="margin-left:20px" class="button_normal" type="button" value="Mail Renter" onclick="window.open('mailto:')"/>
  </td>   
    </tr>
<?php

This is all fixed with very basic CSS, so if you have trouble with this, I would seriously consider following some CSS tutorials online!

Upvotes: 2

Related Questions