Bootstrap 3 - Thumbnail table design - css

Question

I trying to design thumbnail using bootstrap 3
I am unable to design the table in that way can you please help me out
<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
Electronic City</p>
<table border="1" class="propertyDetails">
<tr>
<td>Price</td><td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td><td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td><td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td><td>15</td>
</tr>
<tr>
<td colspan="2" align="right"><div class="enquirybuttonclass">
<input class="btn btn-primary" type="button" value="ENQUIRY"></div> </td>
</tr>
</table>
</div>
</div>
</div>
I have attached the image:

Answer 1

Try this:
<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
</div>
Example
Rather than using the thumbnail class - which is generally just for holding images - I've changed the whole thing to a panel. The first part, including the image, is contained in a "panel-body", the table (now with class "table") has had all padding and margins removed so that it covers the full width, and the button has been removed from the table and put in its own panel with a "pull-right" class to bring it over to the right side.

Answer 2

Remove the border from the table, add the table class and you should be good to go.
<div class="thumbnail">
<img src="//placehold.it/250X100/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
Electronic City</p>
<table class="table">
<tbody><tr>
<td>Price</td><td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td><td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td><td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td><td>15</td>
</tr>
</tbody></table>
<div class="text-right">
<input class="btn btn-primary" value="ENQUIRY" type="button">
</div>
</div></div>
demo