Bootstrap表 - 列标题在小型设备上更改

Question

在大型或中型视图上显示的表格......除了小型之外都可以：

当我调整到一个小视口时，我的列标题会变得很糟糕......请注意整个顶部的“Column1”，但列是堆叠的

我正在使用表类：

                <table class="table table-striped table-mobile mobile-primary">
                    <colgroup>
                        <col class="col-lg-3">
                        <col class="col-lg-2">
                        <col class="col-lg-3">
                        <col class="col-lg-3">
                        <col class="col-lg-1">
                    </colgroup>
                    <thead>
                        <tr class="bg-primary">
                            <th>Event</th>
                            <th class="text-center">Location</th>
                            <th class="text-center">Start</th>
                            <th class="text-center">End</th>
                            <th class="text-center">Register</th>
                        </tr>
                    </thead>
                    ...
                </table>

• 取出colgroup类没有帮助。
• 我确实把它包裹在一个溢出的div中，但这没有帮助。

溢出div：

            <div style="overflow: auto;">
               table Html is in here...
            </div>

当视口很小时，我可以使列标题堆叠或消失吗？

Answer 1

我应该仔细研究一下bootstrap模板中的自定义。我的bootstrap模板有一个colgroup和css与之关联，如下所示：

         <colgroup>
            <col class="col-xs-3">
            <col class="col-xs-3">
            <col class="col-xs-3">
            <col class="col-xs-3">
        </colgroup>

我刚把它拿出来，事情调整很好。我可能已经调整了colgroup css，但默认的表功能对我来说很好。