在 Bootstrap 中自定义表格

Question

我正在使用当前的 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> 之前将图像带到顶部

Answer 1

您缺少<td> 元素。用列跨度试试这个：

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