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

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');