任何方式来同步表格列宽度与HTML + CSS？
我有一些表的列相同，如果他们共享相同的列宽，它会看起来好多了。 这样的事情可能吗？ 把它们放在同一个表格中，一些没有边界的行是不可行的。
编辑：是的，我知道我可以自己修复宽度，但我希望能够配合浏览器的列宽度algorithm，但只是将两个或更多的表格绑在一起做这种布局的目的。
我不认为这样的事情是可能的，但我想我会检查以防万一。
只有固定宽度的列才可能。 如果你可以设置一个固定的宽度然后像这样的CSS应该工作：
td { width: 25%; } 你可以像这样自定义每一列的宽度：
<table> <tr> <td class="col1">...</td> <td class="col2">...</td> </tr> </table> ... <table> <tr> <td class="col1">...</td> <td class="col2">...</td> </tr> </table>
然后指定宽度像这样：
.col1 { width: 25%; } .col2 { width: 75%; }
如果您对浏览器显示的列宽不太感兴趣，只要它们在不同的表格中相同，就可以将CSS table-layout属性（由所有主stream浏览器支持）与表格结合使用宽度：
table { table-layout: fixed; width: 100%; }
这将导致所有列（没有指定宽度）具有相同的宽度，无论表内容如何。
下面是一个小的JavaScript，用来调整单元格的大小，使它们在页面上的所有表格中具有相同的宽度。
function resizeTables() { var tableArr = document.getElementsByTagName('table'); var cellWidths = new Array(); // get widest for(i = 0; i < tableArr.length; i++) { for(j = 0; j < tableArr[i].rows[0].cells.length; j++) { var cell = tableArr[i].rows[0].cells[j]; if(!cellWidths[j] || cellWidths[j] < cell.clientWidth) cellWidths[j] = cell.clientWidth; } } // set all columns to the widest width found for(i = 0; i < tableArr.length; i++) { for(j = 0; j < tableArr[i].rows[0].cells.length; j++) { tableArr[i].rows[0].cells[j].style.width = cellWidths[j]+'px'; } } } window.onload = resizeTables;
要扩大Ken的答案，您还可以指定像素的确切宽度：
td { width: 250px }
或ems（字母m的宽度）：
td { width: 32em }
或者ex或者pt或者其他什么（好吧…实际上是％，pt，px，em，ex可能就是这样）。 如果你需要你的列是不同的宽度，那么简单的方法是给表格单元格类：
<table><tr> <td class="col1">...</td><td class="col2">...</td>... </tr></table>
并将列宽分配给类：
td.col1 { width: 48em } td.col2 { width: 200px } ...
将列宽分配给每个表中的第一行就足够了。 [编辑：看起来就像我在写作的时候一直在挖掘]
你也可能会疯狂的CSS 2兄弟select器，并写了类似的东西
tr > td:first-child { width:48em } /* first column */ tr > td:first-child + td { width: 200px } /* second column */ tr > td:first-child + td + td { width: 5% } /* third column */ ...
但是如果你有几列，那可能会变丑。 如果您使用某种模板系统或脚本来生成这些表格，我相信只要在模板中的每个单元格上放置class =“col＃”属性就会更容易/更清晰。
我感到震惊，没有人build议列组 ！ 有了它，你可以给一个特定的类，宽度和其他有用的属性列。 而且由于它是HTML 4.01，所有支持doctype的浏览器都支持它。
Luis Siquot的答案就是我用过的。 然而，而不是使用clientWidth，你应该使用jquery的宽度（）函数来标准化浏览器之间的宽度，并不计算填充。 使用clientWidth将导致表格单元格由于填充（如果填充用于TD中）而在ajaxpostbacks上展开。 所以，使用Luis Siquot的答案的正确的代码将被取代
var cell = $(this)[0].rows[0].cells[j]; if(!cellWidths[j] || cellWidths[j] < cell.clientWidth) cellWidths[j] = cell.clientWidth;
同
var cell = $($(this)[0].rows[0].cells[j]); if (!cellWidths[j] || cellWidths[j] < cell.width()) cellWidths[j] = cell.width();
最简单的方法是一种“肮脏”的方式，但它是最好的。 它确实需要：
把你的两个表合并成一个表。 在我的情况下，两张桌子之间唯一的一个是h3
所以我的桌子
<table> <tr></tr> <table> <h3>Title<h3> <table> <tr></tr> <table>
成为这样：
<table> <tr></tr> <tr><td colspan="6"> <h3>Title<h3> </td></tr> <tr></tr> <table>
这样你的表将“同步”它的大小。 当然这只有在两张桌子之间没有太多复杂的东西的时候才有用，但是我猜在大多数情况下并不是这样。 如果是这样，首先就不需要同步。
每一对表的大小调整到相同的宽度
类似于Ole J. Helgesen，但使用jquery和一个参数来select哪些表均衡。
（我不能投票，但它本质上是你的解决scheme）
<table data-ss="1" border="1"> <tr><td>asdf<td>129292<td>text </table> <table data-ss="1" border=1> <tr><td>a<td>1<td>each column here has the same size than the table above </table> <table data-ss="2" border=1> <tr><td>asdf<td>129292<td>text </table> <table data-ss="2" border=1> <tr><td>each column here has the same size than the table above<td>a<td>1 </table>
并使用这个sctipt
$(function(){ resizeTables('1'); resizeTables('2'); }); //please set table html attribute `data-ss="something"` to properly call this js // ss is short for SharedSize function resizeTables(sharedSize){ var tableArr = $('table[data-ss='+sharedSize+']'); var cellWidths = new Array(); $(tableArr).each(function() { for(j = 0; j < $(this)[0].rows[0].cells.length; j++){ var cell = $(this)[0].rows[0].cells[j]; if(!cellWidths[j] || cellWidths[j] < cell.clientWidth) cellWidths[j] = cell.clientWidth; } }); $(tableArr).each(function() { for(j = 0; j < $(this)[0].rows[0].cells.length; j++){ $(this)[0].rows[0].cells[j].style.width = cellWidths[j]+'px'; } }); }
