任何将表格列宽与HTML+；CSS？

我有许多表具有相同的列，如果它们共享相同的列宽，看起来会更好。这可能吗？将它们放在同一个表中，其中有些行之间没有边框，这不是一个选项

编辑：是的，我知道我可以自己修复宽度，但我希望能够与浏览器的列宽算法相结合，但只是为了进行布局而将两个或多个表绑定在一起

---

我认为这样的事情是不可能的，但我想我会检查一下以防万一。

只有在你能确定列宽的情况下才有可能。如果您可以设置一个固定的宽度，那么像这样的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%;
}

---

要扩展Ken的答案，还可以指定以像素为单位的精确宽度：

td { width: 250px }

或ems（字母m的宽度）：

或者ex或者pt或者别的什么（嗯……实际上，%，pt，px，em，ex可能就是它）。如果需要列的宽度不同，那么简单的方法是为表单元格类指定：

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

为每个表的第一行指定列宽就足够了。[编辑：看起来我在写作的时候被人抓住了]

您可能也会对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  */
...

---

但是如果你有超过几个专栏，那可能会很难看。如果您使用某种模板系统或脚本来生成这些表，我相信只需在模板中的每个单元格上放置class=“col#”属性一次就会更容易/更清晰。

我制作了一个小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;

函数resizeTables（）
{
var tableArr=document.getElementsByTagName（'table'）；
var cellWidths=新数组（）；
//扩大
对于（i=0；i

我几乎震惊于没有人提出建议！使用它，您可以为列指定特定的类、宽度和其他有用的属性。由于它是HTML 4.01，所以所有支持doctype的浏览器都支持它。

如果您对浏览器的列宽不太挑剔，只要不同表的列宽相同，就可以将CSS属性（所有主要浏览器都支持）与表宽结合使用：

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

---

这会导致所有列（没有指定的宽度）具有相同的宽度，而不管表内容如何。

每对表都将其列的大小调整为相同的宽度
与Ole J.Helgesen类似，但使用jquery和一个参数来选择哪些表相等。
（我不能投票，但这基本上是你的解决方案）

ASDF129292文本
这里的每一列的大小都与上表相同
ASDF129292文本
这里的每一列的大小都与上面的表A1相同

然后用这只脚

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

$（函数（）{
可树脂（“1”）；
可树脂（“2”）；
});
//请设置table html属性`data ss=“something”`以正确调用此js
//ss是SharedSize的缩写
功能可调整大小（sharedSize）{
var tableArr=$（'table[data ss='+sharedSize+']'）；
var cellWidths=新数组（）；
$（tableArr）。每个（函数（）{
对于（j=0；j<$（此）[0]。行[0]。单元格。长度；j++）{
var cell=$（this）[0]。行[0]。单元格[j]；
如果（！cellWidths[j]| cellWidths[j]

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]。行[0]。单元格[j]；
如果（！cellWidths[j]| cellWidths[j]

与

var cell=$（$（this）[0]。行[0]。单元格[j]）；
如果（！cellWidths[j]| cellWidths[j]

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

只需将两个表合并到一个表中。 在我的例子中，两个表之间唯一的区别是

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>

标题

这样，您的表将“同步”它的大小。

---

当然，这只有在两个表之间没有太多复杂的东西时才有效，但我猜在大多数情况下不是这样。如果是，那么首先就不需要同步。

您可以通过组合表（如@Stefanvds所建议的）来同步列宽，但对每个表使用

tbody

+

th

：

表格{
边界塌陷：塌陷；
}
表thead，
桌体{
边框底部：实心；
}
表tbody th{
文本对齐：左对齐；
}

ID测量平均最大值
猫
93支腿3.5 4
10尾11
说英语的
32支腿2.67 4
35尾0.331

该同级选择器已取消

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();   

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