Bootstrap 3 - 缩略图 table 设计

Question

我正在尝试使用 bootstrap 3

设计缩略图

我不能那样设计 table 你能帮帮我吗

<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>        
        <a href="#">Electronic City</a></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>

我附上了图片：

Answer 1

试试这个：

<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>  <a href="#">Electronic City</a>

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

我没有使用缩略图 class——通常只是用来保存图片——我把整个东西都变成了一个面板。第一部分，包括图像，包含在 "panel-body" 中，table（现在是 class "table"）已删除所有填充和边距，以便覆盖全宽，并且按钮已从 table 中移除，并使用 "pull-right" class 将其放在自己的面板中以将其移至右侧。

Answer 2

移除 table 的边框，添加 table class 就可以了。

<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>        
    <a href="#">Electronic City</a></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

Bootstrap 3 - 缩略图 table 设计

Bootstrap 3 - Thumbnail table design

css

html-table

twitter-bootstrap