在Bootstrap中自定义表

时间:2014-12-18 11:15:41

标签: css twitter-bootstrap twitter-bootstrap-3 html-table

我正在使用当前的Bootstrap版本创建一个电子商务网站。在管理面板上,我试图以这样的方式显示表中的所有产品信息:

+______+_____________+_____+_______+_____+
| name | description | qty | price | sku |
+______+_____________+_____+_______+_____+
|  P1  | Description | 10  |  200  | 2ds |
+______+_____________+_____+_______+____ +
| Image 1 , Image 2 , Image 3, ......    |
+______+_____________+_____+_______+____ +
|  P2  | Description | 14  |  500  | 3ds |
+______+_____________+_____+_______+____ +
| Image 1 , Image 2 , Image 3, ......    |
+______+_____________+_____+_______+____ +
|  P3  | Description | 45  |  234  | 4xs |
+______+_____________+_____+_______+____ +
| Image 1 , Image 2 , Image 3, ......    |
+______+_____________+_____+_______+____ +        

等等。希望我能让你理解我在这里要做的事情。在每个产品行出现产品图像之后......然后是另一个产品行及其相应的图像等等......

我尝试过:

<table class="table table-striped text-center">
                            <thead>
                                <tr>
                                  <th>Name</th>
                                  <th>Category</th>
                                  <th>Description</th>
                                  <th>Stock Qty</th>
                                  <th>Shown Qty</th>
                                  <th>Sale Price</th>
                                  <th>Original Price</th>
                                  <th>SKU</th>
                                  <th>Image</th>
                                  <th>Action</th>
                                  </tr>
                            </thead>
                           <tbody>
                              <tr>
                              <td>Some Product</td>
                              <td>T Shirt</td>
                              <td>Description</td>
                              <td>24</td>
                              <td>500</td>
                              <td>BKSTU56V57</td>
                              </tr>
                              <tr><img src=".." /><img src="...."></tr> 
                          </tbody>
                          </table>

它不起作用。甚至在<th>

之前将图像置于顶部

1 个答案:

答案 0 :(得分:3)

您错过了<td>元素。请尝试使用列范围:

<tr><td colspan="6"><img src=".." /><img src="...."></td></tr>