将HTML表格转换为引导列-响应式设计
我一直在工作，我们有一个旧产品，目前使用HTML表格来显示其内容。在这个响应性的世界里，我想让它响应性。在网上阅读后，我相信这可能会是一个很大的工作，整个网站的返工，然而，我正在试图找到一个解决方案，可以将任何表转换为列的div包含引导列。这里给出了登录页面的一个很好的例子：JsFiddle
我不能访问字段的源代码，但是我可以使用jQuery添加元素(append/prepend)。我也可以添加CSS样式。
有人能帮我解决这个问题吗？
<table></table>
.
.
.
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
</div>
</div>干杯。
回答 10
Stack Overflow用户
发布于 2016-12-20 05:41:23
可能很难将任何给定表完美地转换为引导列。考虑到bootstrap列最多只能有12列，而一个表可能有更多的列。
此函数将表转换为BS行/列，但它假设表的行数可以被12整除(如果不是，则必须根据自己的需要进行调整)。
/**
* Convert a table to bootstrap columns
* @param table DOMElement
*/
function makeBSCols(table){
var html = ["<div class='container'>"];
$(table).find('tr').each(function(){
var $td = $(this).find('td').length ? $(this).find('td') : $(this).find('th');
// get the column width
if($td.length > 12) return alert("too many columns");
var cls = Math.floor(12/$td.length);
if(cls!==(12/$td.length)) return alert("invalid column count");
html.push("<div class='row'>");
$td.each(function(){
html.push('<div class="col-sm-'+cls+'">'+$(this).html()+'</div>');
});
html.push('</div>');
});
html.push('</div>');
$(table).replaceWith(html.join(''));
}示例：makeBSCols(document.getElementById('myTable')) (Fiddle)
对于一个更灵活的解决方案，(假设您实际显示的是表格数据)，您可以考虑只使用BS表，而不是使用BS cols/rows。这只是将BS样式添加到您的表中，并将其放入.table-responsive div中，这有助于提高响应速度。
/**
* Convert a regular table to bootstrap table
* @param table DOMElement
*/
function makeBSTable(otable){
var table = $(otable).clone(); console.log(table);
table.addClass("table-hover table-bordered table-striped table");
var div = $('<div class="table-responsive" />');
$(otable).replaceWith(div);
div.append(table);
}示例：makeBSTable(document.getElementById('myTable')) (Fiddle)
Stack Overflow用户
发布于 2016-12-14 21:31:38
我不认为这是“最好的”表单来解决你的问题，但是如果你只能使用CSS和jQuery，我认为你可以仅仅分割表格数据的每一部分，使用$(...).hide()使其不可见，然后使用$(...).html()将内容放入Bootstrap的div中。
Stack Overflow用户
发布于 2016-12-14 21:39:17
如果站点是基于html表的，我认为你必须重写整个html。
如果您只将表用作“普通”表，则只需将class="table添加到表中即可
此外，您还可以使用class="table-responsive"将表包装在div中
例如：
<div class="table-responsive">
<table class="table">
...
</table>
</div>还有一些更多的样式可供选择：table-hover table-striped ...您可以在此处找到一些示例：http://getbootstrap.com/css/#tables
https://stackoverflow.com/questions/40993532
复制相似问题