Html Bootsrap 4列作为表运行

我正在尝试用bootstrap 4网格重新创建一个表。我用这个CSS代码使它表现为一个表

.data-table{
    display : table ;        
    padding : 0em; 
}

.data-table > .row{
  display : table-row ; 
}

.data-table > .row > * {
  display : table-cell ; 
  white-space : nowrap ; 
}

.data表

位于

.container

div中

我将columns类设置为“col auto”，因此列的宽度是根据其中的数据排列的。所有这些结合在一起工作得很好，但问题是，当我试图让一些列不出现在中小型设备中时，使用bootstrap 4“d-none d-lg-block”类，整个表都出现了问题。但这只有在我将该类设置为相邻的两列时才会发生，我将其设置为：

<div class "col-auto d-none d-lg-block"><!--code--></div> 
<div class "col-auto">--code--</div> 
<div class "col-auto d-none d-lg-block"><!--code--></div> 

--代码--

它工作得很好

---

因此，我想知道如何解决这个问题，以及我可以做些什么不同的事情。

问题是您正在编写display属性，因此它无法按照引导定义工作。我要做的是使用典型的引导，为我想要隐藏的单元格添加一个额外的类，并使用@media来隐藏它们。 假设该类名为md hide，css将如下所示：

@media screen and (max-width: 992px) {
   .md-hide {
      display: none;
   }
}

---

我希望这会有所帮助。

我认为对于小屏幕来说，最好的方法是水平滚动表格，而不是隐藏列。要做到这一点，只需向表的父元素添加

overflow-x:auto

。这是可行的，但由于某种原因，我现在做的不是这样。