有没有办法将表列宽与HTML + CSS同步？

Question

我有许多具有相同列的表,如果它们共享相同的列宽,它看起来会更好.这样的事情可能吗？将它们放在同一个表中并且它们之间没有边框的某些行不是一种选择.

编辑:是的我知道我可以自己修复宽度,但我希望能够与浏览器的列宽算法相关联,但只需将两个或多个表绑在一起以进行该布局.

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

Answer 1

如果您对浏览器提供的列宽不太挑剔,只要它们在不同的表中相同,您就可以将CSS table-layout属性(所有主流浏览器都支持)与表宽度结合使用:

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

这会导致所有列(没有指定的宽度)具有相同的宽度,而不管表格内容如何.

Answer 2

只有你可以修改列的宽度才有可能.如果你可以设置一个固定的宽度,那么这样的一些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%;
}

Answer 3

这是我用来调整单元格大小以使它们在页面上的所有表格中具有相等宽度的小型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;