Question

我正试图找到一种方法，使用CSS，在响应表的基础上更改colspan，例如在购物车上找到的表。所以会发生的是，在较低的分辨率下，某些列被修剪掉以保留水平空间。这使得col跨越行“悬挂”在末端，基本上保留原始宽度，导致溢出情况。众所周知，手机上的水平溢出是一种痛苦。

那么有没有办法使用CSS来改变表行的colspan？ 我已经知道如何使用JS ，使用一个监听器框架，但我很好奇是否有一些CSS hack我可以做。这有助于防止一点FOUC。

这是一个小提琴示例：https://jsfiddle.net/Dhaupin/5pv5qmru/3/

以下是示例表结构：

<table>
<thead>
  <tr>
    <td class="image">Image</td>
    <td>Name</td>
    <td>Model</td>
    <td>Qty</td>
    <td>Price</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="image">-- img --</td>
    <td>This Red Hat</td>
    <td>HAT-RED-2384</td>
    <td>2</td>
    <td>$13.22</td>
  </tr>
  <tr>
    <td class="total right" colspan="4">Subtotal:</td>
    <td>$26.44</td>
  </tr>
  <tr>
    <td class="total right" colspan="4">Shipping:</td>
    <td>$6.65</td>
  </tr>
  <tr>
    <td class="total right" colspan="4">Total:</td>
    <td>$33.10</td>
  </tr>
</tbody>
</table>

还有一些默认的CSS，将“图像”列隐藏在640px或更低的位置：

table {
  border-collapse: collapse;
}
td {
  border: 1px solid grey;
  padding: 4px;
  width: 18%;
}
.right {
  text-align: right;
}

@media (max-width: 640px) {
  td.image {
    display: none;
    /* some kinda css hack here to "hide" without "hiding? */
  }
  td.total {
    /* colspan 3 here? how do we make it span cleanly? */
  }
}

这是全宽的样子：

这是在较小的res上的样子，注意底部的colspan溢出：

Answer 1

我知道这不是最好的解决方案但是css不允许更改本机html表属性值。

此处可提供更多信息： HTML colspan in CSS

为了更好的解决方案，您可以使用js / jquery 并更改td.total

的属性colspan

＆＃13;

@media (max-width: 480px) {
  td.image {
    position: absolute;
    left: -99999px;
  }
}

＆＃13;

Answer 2

此解决方案不会更改colspans，而是通过添加显示为隐藏的单元格（具有不同colspans）来纠正colspan问题。

这是您的具有自举样式的表格。请注意在总标题列上相反使用d-none和d-md-table-cell。

<button class="btn btn-sm btn-info increase"
data-id="{{ p.id }}"
data-url="{{ path('cart_add', {'pid': p.id}) }}">
Increase qty
</button>

$(document).ready(function() {
    $(".increase").click(function (e) {
        var value = $(this).data('id');
        console.log('value: ' + value);
        $.ajax({
            type: "POST",
            url: $(this).data('url'),
            async: true,
            data: {},
            success: function () {
                console.log('success increment');
            }
        });
    });
});

使用@media查询隐藏移动

2 个答案: