有什么方法可以将表格列宽与HTML+CSS同步?

如果您对浏览器提供的列宽不太挑剔,只要不同表的列宽相同,就可以使用CSS table-layout

table {
    table-layout: fixed;
    width: 100%;
}

这会导致所有列(没有指定的宽度)具有相同的宽度,而与表内容无关。

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%;
}

下面是我制作的一个小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 }

<table><tr>
    <td class="col1">...</td><td class="col2">...</td>...
</tr></table>

并为类指定列宽:

td.col1 { width: 48em }
td.col2 { width: 200px }
...

[编辑:看起来我在写作的时候被人抓住了]

您可能也会对CSS 2同级选择器发疯,并编写类似

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  */
...

Luis Siquot的答案就是我使用的答案。但是,您不应该使用clientWidth,而应该使用jquery width()函数来规范化浏览器之间的宽度,并且不计算填充。使用clientWidth会导致AjaxPostback上的表单元格由于填充而扩展(如果TD中使用了填充)。 所以,正确的代码使用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();   

column groups ! 使用它,您可以为列指定特定的类、宽度和其他有用的属性。因为它是HTML4.01,所以所有支持doctype的浏览器都支持它。

最简单的方法是一种“肮脏”的方法,但效果最好。 它完全符合要求:

只需将两个表合并到一个表中。 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>

这样,您的表将“同步”它的大小。 当然,这只有在两个表之间没有太多复杂的东西时才有效,但我猜在大多数情况下不是这样。如果是的话,一开始就不需要同步了。

每对表将其列的大小调整为相同的宽度
类似 奥勒·J·赫尔格森 但是使用jquery和一个参数来选择哪些表是相等的。
(我不能投票,但这基本上是你的解决方案)

<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>

然后用这只脚

$(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';
    }
  });
}

tbody + th

table {
  border-collapse: collapse;
}

table thead,
table tbody {
  border-bottom: solid;
}

table tbody th {
  text-align: left;
}

<table>
  <thead>
    <tr> <th> ID <th> Measurement <th> Average <th> Maximum
  <tbody>
    <tr> <td> <th scope=rowgroup> Cats <td> <td>
    <tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
    <tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
  <tbody>
    <tr> <td> <th scope=rowgroup> English speakers <td> <td>
    <tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
    <tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
</table>

资料来源: Example in the HTML spec itself