更新：
从原始帖子中并不清楚作者需要处理深度嵌套的表。我有相应的updated his JsFiddle。
这是我不久前编写的一些 jQuery 代码，它可以即时将表转换为引导行和列。它假定表格是对称的，没有 colspan 或 rowspan 属性。
将表格转换为引导布局时的主要问题之一是正确处理标题行。如果所有标题单元格都使用 th 标记，则此 jQuery 代码将执行此操作。通过将find('th') 替换为find('th,td')，您可以轻松地假设第一行的任何内容都是标题。
最后，保留原始表的属性很重要，例如 id、类和 onclick 事件。任何以编程方式添加的事件都可能需要重新应用。
$('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>