减少引导表宽度，colspan 不起作用

Posted 2023-03-05

【中文标题】减少引导表宽度，colspan 不起作用

【英文标题】：Decrease bootstrap table width, colspan not working

【发布时间】：2021-03-07 12:44:23

【问题描述】：

我正在使用一个引导表，它在右上角包含一个带有 rowspan = "2" 的表，然后它有 2 行，然后在另一端另一个 rowspan = "2"，如下所示：

我遇到的问题是我无法“缩小”图像所在的表格的宽度，即第一列，我尝试使用 col-1，使用 colspan = "1" 但是所以到目前为止我找不到解决方案，你能帮帮我吗？图像所在的表格的总宽度应该是相同的 ROWSPAN = "1"。

这是代码：

<tr>
    <td rowspan="2" colspan="1">
  <img src="IMAGE">
      

    </td>
    <td class="col-10">
    PRODUCT NAME
    </td>
  <td rowspan="2" colspan="1">$PRICE</td>
    
  </tr>
  <tr>
    <td>
    <span>DESCRIPCION</strong></span>
    </td>
  </tr>

【参考方案1】：

如果您需要为图像行设置宽度，您可以将width="...px" 改成<td width="..px"> 我试着做一个这样的例子

table 
      border-collapse: collapse;
    
    table,
    tr,
    th,
    td 
      border: 1px solid #000;
    

    th 
      padding: 1ex;
      background: #ccc;
    
    td 
      padding: 1ex;
    
    .divide td 
      border-top: 3px solid;
    

<table>
<tr>
  <td rowspan="2" colspan="1" >
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" >
  </td>
  <td class="col-10">
  PRODUCT NAME
  </td>
  <td rowspan="2" colspan="1">$PRICE</td>
  </tr>
  <tr>
    <td>
    <span>DESCRIPCION</strong></span>
    </td>
  </tr>
</table>
<table>
<tr>
  <td rowspan="2" colspan="1" >
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" >
  </td>
  <td class="col-10">
  PRODUCT NAME
  </td>
  <td rowspan="2" colspan="1">$PRICE</td>
  </tr>
  <tr>
    <td>
    <span>DESCRIPCION</strong></span>
    </td>
  </tr>
</table>
<table>
<tr>
  <td rowspan="2" colspan="1" >
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" >
  </td>
  <td class="col-10">
  PRODUCT NAME
  </td>
  <td rowspan="2" colspan="1">$PRICE</td>
  </tr>
  <tr>
    <td>
    <span>DESCRIPCION</strong></span>
    </td>
  </tr>
</table>
<br>
<br>
<table>
    <tr>
        <th>head</th>
        <th>title</th>
        <th>title</th>
        <th>title</th>
        <th></th>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td rowspan="2">white</td>
    </tr>
    <tr>
        <td colspan="4">
            lorem ipsum
        </td>
    </tr>
    <tr class="divide">
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td rowspan="2">gray</td>
    </tr>
    <tr>
        <td colspan="4">
            lorem ipsum
        </td>
    </tr>
    <tr class="divide">
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>white</td>
    </tr>
    <tr class="divide">
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td rowspan="2">gray</td>
    </tr>
    <tr>
        <td colspan="4">
            lorem ipsum
        </td>
    </tr>
</table>

【讨论】：

现在是！我用你的代码解决了，非常感谢。问题是我在表格中创建动态内容，然后它崩溃了，但是，你的代码工作 100%