模仿智能手机表与响应式设计

Question

我有一个包含n列的表，我正在使用bootstrap进行设计。

我想要做的是将左边的td放在左边，右边的类叠加在右边（带有居中元素，如按钮或复选框等）取最小宽度）。在中间，我希望另一个td位于中间，一个位于另一个之下，没有填充或边距。

以下是我需要的例证：

我通过这样做成功地渲染了中间部分：

tr {
    border-top: 1px solid #eceeef;
}
td {
    padding:0px !important;
    padding-left:20px !important;
    border-top: none !important;
    width:100% !important;
    display: block;
}

我让我的左班和右班上班工作很麻烦......我试图使用float:left，但问题是它没有占据整个高度而且没有当它不是第一个td时工作。我也尝试了inline-block只是为了侧类，但它占据了大部分宽度，我无法将它们堆叠起来（如绿色区域）。

任何建议都将不胜感激！

编辑： 这是plunker（需要使用宽度来查看响应式设计）

这是我的PUG代码：

.table-responsive
    table.table.table-striped
        tbody
            tr
                td.left-class
                    input(type='checkbox')
                td test
                td test
                td test
                td test
                td test
                td.right-class
                    button click1
                td.right-class
                    button click2

Answer 1

这里有jsfiddle

我只能用jquery制作这个，因为出于某些原因，当我从css添加这个样式时它不起作用，但我认为这将解决你的问题

$('.right-class').css('display','block');