整齐地展示宽桌的方法

Question

我正在制作一个简单显示数据网格的基本屏幕，但网格可以拥有比屏幕可以处理的更多的列。我打算使用Bootstrap，但只是为了它的控件，外观和感觉。但是，该页面无需针对移动设备进行扩展。

我展示的数据的一个非常基本的例子如下：

https://jsfiddle.net/bunwt5cy/1/

因此，第一列只是一个递增的数字，后跟一个日期，然后是数据。列数可以从1个帐户到20个。每个列（单元格）有3个财务值（演示中显示2个），范围从0.00到99,999.99（显示所需的大小）。

我目前正在使用<TABLE>，但有更好的方法，使用bootstrap来执行此操作吗？用DIV可以做得更好吗？如果我这样做，我每行限制为12个Div？如果是这样，那么这不是一个选项，因为我的网格可能具有＆gt; 12列。

以下是一些行的示例。我试图让它更整洁，尽可能使用＆＃39;最好的做法，但也要漂亮。

Answer 1

作为最佳做法，您应该继续使用table元素表示类似电子表格的表格数据，同时使用CSS使其“漂亮”。

根据HTML5规范{/ 3}}：

  

div元素根本没有特殊意义......

     

强烈建议作者将div元素视为最后的元素，因为没有其他元素是合适的。使用更合适的元素而不是div元素可以为读者提供更好的可访问性，并使作者更易于维护。

在这种情况下table可用，它适用于表格数据，因此就最佳做法而言，您应继续使用table元素表示此类表格数据，而不是div。