我一直在处理我们拥有的旧产品，目前使用HTML表格来显示其内容。在这个响应式世界中，我想使其响应式。在网上阅读后，我相信重新设计整个网站可能需要很多工作，但我试图找到一种解决方案，将任何表格转换为基于包含Bootstrap列的div的列。这是登录页面的一个非常好的例子：JsFiddle
我无法访问字段的源代码，但我可以使用jQuery添加元素(append/prepend)。我也可以添加CSS样式。
请有人能帮我实现这个方法吗？
<table></table>
.
.
.
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
</div>
</div>
干杯。
将任何给定的表格无缝转换为Bootstrap列可能会很困难。请考虑到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)
如果您要显示表格数据，为了获得更灵活的解决方案，您可以考虑使用Bootstrap表格而不是Bootstrap列/行。这个方法只会将Bootstrap样式添加到您的表格中，并将其放置在.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）
针对楼主：您需要重写整个项目中的表格
根据您的要求，您不想重新制作任何已建立的表格，同时您希望将现有的表格转换为响应式的 div。
首先，为了提供一个可以在整个项目中使用的解决方案，非常重要的是网站中的所有表格都遵循相同的结构标准。从登录页面中我看到目前情况非常随意。
即使您编写了适用于您提供的屏幕（登录屏幕）的解决方案，我也不确定是否足以满足您整个网站的需求。您屏幕上的表格嵌套到核心。如果采用这种方法，您永远不知道会发生什么问题。
因此，我的建议是.. 既往不咎.. 以前的开发人员只使用表格来构建页面，但是世界已经变成了响应式。未来几年它还将发生变化。我们永远不知道。所以现在是时候将所有页面重写为新的 HTML 结构并升级到最新的可能代码。
针对公众：想要根据设备将表格更改为 div
快速检查： 工作的演示（调整结果屏幕大小以查看效果）
据我所知，您希望在中型和大型设备上显示table，但是当用户使用小型设备或将屏幕调整为小型时，您希望以不同的方式显示它，更像一个div结构。
我有一个使用内置 bootstrap 类的解决方案。
解决方案：
使用 bootstrap 提供的辅助类根据视口切换显示表格和其他部分。
这是来自文档的截图和测试用例
因此，根据上述详细信息，您所需要的就是..
// the tables are visible only on medium and large devices
<table class="visible-md-block visible-lg-block">
//..your table structure
</table>
// This section is only visible in small and extra small devices
<div class="visible-xs-block visible-sm-block">
//The table data represented in a div structure.
//Each row can be structured as sections with header as label and row data as value.
</div>
缺点：
优点：
希望这可以帮助您！
$(...).hide()将其隐藏，然后使用$(...).html()将该内容放入Bootstrap的e.g.:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
还有一些其他的样式可用：table-hover table-striped ... 您可以在这里找到一些示例：http://getbootstrap.com/css/#tables
Bootstrap将列和行分为响应所有设备的部分，请尝试此功能。
使用此类型的响应式设计。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-offser-2 col-lg-5">
<form>
<div class="form-group">
<input type="text" name="username" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="password" name="pass" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-success">Login</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<div class="container">
<div class="row">
<div class="col-md-4"> </div>
<div class="col-md-4"> /*You can place the table in here*/ </div>
<div class="col-md-4"> </div>
</div>
</div>
<table>
<thead>
<tr>
<th>header 1</th>
<th>header 2 </th>
</tr>
</thead>
<tbody>
/*You could pull and add the data in here with <tr> and <td> using jQuery*/
</tbody>
</table>
find('th')替换为find('th,td')来轻松地假设第一行中的任何内容都是标题。$('table:not(:has(table))').each(function() {
debugger;
var rowSelector = 'tr';
var attributes = $.map(this.attributes,function(a,i) {
return a.name+'="'+a.value+'"';
}).join(' ');
// handle collapsible headers
var $headers = $('tr:first', this).find('th');
var columns = $('tr:first',this).find('th,td').length;
if ($headers.length > 0) {
$headers.closest('tr').addClass('row visible-sm visible-md visible-lg');
$headers.addClass('form-group col-sm-' + Math.floor(12 / $headers.length)).wrapInner('<label></label>');
rowSelector = 'tr:not(:first)';
}
// add classes to each data row
$(rowSelector, this).addClass('row').each(function() {
$('td,th', this)
.addClass('form-group col-sm-' + Math.floor(12 / columns))
.filter(function() {
return $headers.length > 1;
})
.each(function (i) {
// add collapsible headers to each row
$(this).prepend('<label class="visible-xs">' + $($headers[i]).html() + '</label>');
});
});
// convert input elements to bootstrap styled controls
$(':input', this).addClass('form-control').css('width', '');
var divs = '<div class="container"><div '+attributes+'>'+$(this).html()
.replace(/<\/{0,1}tbody>/gi, '')
.replace(/<(tr|td|th)/gi, '<div')
.replace(/<\/(tr|td|th)/gi, '</div')+'</div></div>';
$(this).replaceWith(divs);
});
$('table').each(function() {
var rewrite = $(this).html()
.replace(/<(\/{0,1})table/gi, '<$1div')
.replace(/<\/{0,1}tbody>/gi, '')
.replace(/<(\/{0,1})(tr|td|th)/gi, '<$1div');
$(this).replaceWith( rewrite );
});
<table>
<tr><th>First Name</th><th>Last Name</th><th>Address</th><th>City</th><th>State</th><th>Zip Code</th></tr>
<tr><td>Jake</td><td>Elwood</td><td>1060 W Addison St</td><td>Chicago</td><td>IL</td><td>60613</td></tr>
<tr><td>John</td><td>Wayne</td><td>18601 Airport Way</td><td>Santa Ana</td><td>CA</td><td>92707</td></tr>
</table>
<div class="container">
<div class="row visible-md visible-lg">
<div class="form-group col-md-2">
<label>First Name</label>
</div>
<div class="form-group col-md-2">
<label>Last Name</label>
</div>
<div class="form-group col-md-2">
<label>Address</label>
</div>
<div class="form-group col-md-2">
<label>City</label>
</div>
<div class="form-group col-md-2">
<label>State</label>
</div>
<div class="form-group col-md-2">
<label>Zip Code</label>
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">First Name</label>
Jake
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Last Name</label>
Elwood
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Address</label>
1060 W Addison St
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">City</label>
Chicago
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">State</label>
IL
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Zip Code</label>
60613
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">First Name</label>
John
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Last Name</label>
Wayne
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Address</label>
18601 Airport Way
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">City</label>
Santa Ana
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">State</label>
CA
</div>
<div class="form-group col-md-2">
<label class="visible-xs visible-sm">Zip Code</label>
92707
</div>
</div>
</div>
var tablesYouWant = document.querySelectorAll("yourSelection"); //A selection of elements
for(var i = 0; i < tablesYouWantl i++){
i.class += "classNames"; //Add Bootstrap classes to the elements
}