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;

Answer 4

要扩展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兄弟选择器发疯，并编写类似

的内容

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＃”属性就更容易/更清楚。

Answer 5

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

Answer 6

路易斯·斯奎特回答的是我用过的那个。但是，不应使用clientWidth，而应使用jquery width（）函数来规范化浏览器之间的宽度，并且不计算填充。使用clientWidth会导致表格单元格在ajaxpostbacks上扩展，因为填充（如果在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();

Answer 7

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

将两个表合并为一个表。在我的情况下，两个表之间唯一的东西是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>

这样你的桌子就会“同步”它的大小。当然这只适用于两个表之间没有太多复杂的东西，但我猜大多数情况下并非如此。如果是的话，首先不需要同步。

Answer 8

每对表格将其列调整为相同的宽度类似于 Ole J. Helgesen ，但使用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>

并使用此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';
    }
  });
}

Answer 9

您可以通过合并表格来同步列宽（如@Stefanvds所建议），但是对每个表格使用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

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

9 个答案: