Javascript 表列滑块交替

我想创建一个包含4列的表，但只显示3列。因此，理想情况下，我会有一个跨越3列的div，并应用overflow:hidden。单击按钮，我希望第3列（公司2）向左滑动，并替换为第4列（公司3），以便将公司3与公司1进行比较。如果再次单击按钮，公司3应再次向左滑动，但公司2应从右侧滑动，并返回其原始位置。这样做的原因是，在移动视图中，我们无法容纳所有列

小提琴可以在这里找到：

HTML

---

这里有一个快速而肮脏的方法-首先我将类应用于第三个和第四个col，然后将第四个col设置为hidden，持续时间为1，这样它会立即发生。然后，每次按下按钮时，我都会切换第3列和第4列

$(document).ready(function () {
    $(".c4").animate({
        width: 'toggle',
        opacity: 'toggle'
    }, 1); 
    $("button").click(function (event) {
        event.preventDefault();
        $(".c3, .c4").animate({
            width: 'toggle',
            opacity: 'toggle'
        });      
    });
});

---

更新的小提琴：

我来演奏一下。尽管我可以想象他们想要更多的公司来比较。谢谢

.div-table{
  display:table;         
  width:auto;                 
  border:1px solid  #666666;         
  border-spacing:5px;/*cellspacing:poor IE support for  this*/
  padding: 0;
  text-align: center;
}
.div-table-row{
  display:table-row;
  width:auto;
  clear:both;
  padding: 5px;
}
.div-table-col{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:200px;  
  border:1px solid  #666666;
  padding: 5px;
}
.header-row {
    height: 50px;
}

$(document).ready(function () {
    $(".c4").animate({
        width: 'toggle',
        opacity: 'toggle'
    }, 1); 
    $("button").click(function (event) {
        event.preventDefault();
        $(".c3, .c4").animate({
            width: 'toggle',
            opacity: 'toggle'
        });      
    });
});