Question

在此链接http://jsfiddle.net/w9xxgxwm/4/中，您可以看到我的表格。关键是，我希望我的表（第二个）具有第一个表的确切大小。我希望边界与第一个匹配。

<td>标签的大小是相同的，所以我不明白为什么表有不同的大小。百分比属性不应该解决这个问题吗？

主表代码是：

<!DOCTYPE html>
<html>
<body>

<table border="1">
 <tr>
  <td></td>
  <td colspan="2">Perfil</td>
  <td></td>
  <td colspan="2">Grupo EFR</td>
  <td colspan="2">EFR</td>
  <td></td>
  <td></td>
  <td colspan="2">Período de Vigência</td>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td style="width: 6%">Cod Assoc</td>
  <td style="width: 6%">Codigo</td>
  <td style="width: 9%">Descricao</td>
  <td style="width: 7%">Empresa</td>
  <td style="width: 6%">Codigo</td>
  <td style="width: 9%">Descricao</td>
  <td style="width: 6%">Codigo</td>
  <td style="width: 9%">Descricao</td>
  <td style="width: 9%">Episódio</td>
  <td style="width: 3%">Exce.</td>
  <td style="width: 9%">Inicio</td>
  <td style="width: 9%">Fim</td>
  <td style="width: 3%">Preço</td>
  <td style="width: 9%">Observacao</td>
 </tr>
</table>


<table border="1">
  <tr>
   <td style="width: 6%"><input type="text"/></td>
   <td style="width: 6%"><input type="text"/></td>
   <td style="width: 9%"><input type="text" /></td>
   <td style="width: 7%"><input type="text" /></td>
   <td style="width: 6%"><input type="text" /></td>
   <td style="width: 9%"><input type="text" /></td>
   <td style="width: 6%"><input type="text" /></td>
   <td style="width: 9%"><input type="text" /></td>
   <td style="width: 9%"><input type="text" /></td>
   <td style="width: 3%"><input type="text"/></td>
   <td style="width: 9%"><input type="text" /></td>
   <td style="width: 9%"><input type="text" /></td>
   <td style="width: 3%"><input type="text" /></td>
   <td style="width: 9%"><input type="text" /></td>
  </tr>
</table>
</body>
</html>

但你可以在我放的jsfiddle链接上看到输出。

Answer 1

将表更改为在同一个表中包含另一行，如下所示：

<table border="1">
  <tr>
    <td></td>
    <td colspan="2">Perfil</td>
    <td></td>
    <td colspan="2">Grupo EFR</td>
    <td colspan="2">EFR</td>
    <td></td>
    <td></td>
    <td colspan="2">Período de Vigência</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td style="width: 6%">Cod Assoc</td>
    <td style="width: 6%">Codigo</td>
    <td style="width: 9%">Descricao</td>
    <td style="width: 7%">Empresa</td>
    <td style="width: 6%">Codigo</td>
    <td style="width: 9%">Descricao</td>
    <td style="width: 6%">Codigo</td>
    <td style="width: 9%">Descricao</td>
    <td style="width: 9%">Episódio</td>
    <td style="width: 3%">Exce.</td>
    <td style="width: 9%">Inicio</td>
    <td style="width: 9%">Fim</td>
    <td style="width: 3%">Preço</td>
    <td style="width: 9%">Observacao</td>
  </tr>



    <tr>
       <td style="width: 6%"><input type="text"/></td>
       <td style="width: 6%"><input type="text"/></td>
       <td style="width: 9%"><input type="text" /></td>
       <td style="width: 7%"><input type="text" /></td>
       <td style="width: 6%"><input type="text" /></td>
       <td style="width: 9%"><input type="text" /></td>
       <td style="width: 6%"><input type="text" /></td>
       <td style="width: 9%"><input type="text" /></td>
       <td style="width: 9%"><input type="text" /></td>
       <td style="width: 3%"><input type="text"/></td>
       <td style="width: 9%"><input type="text" /></td>
       <td style="width: 9%"><input type="text" /></td>
       <td style="width: 3%"><input type="text" /></td>
       <td style="width: 9%"><input type="text" /></td>
    </tr>
</table>

我还清理并修改了你的CSS

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
table {
    width:100%;
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
}
td {
    display:table-cell;
    width:auto;
}
input {
    width: 100%;
    border:0;
    padding:0;
    margin:0;
}

See fiddle here

Answer 2

默认情况下，table layout是“自动”，这意味着浏览器根据单元格的宽度要求分配列宽。在此模型中，您设置的任何宽度都与建议的最小宽度一样。

要获得“固定表格布局”，您可以设置table { table-layout: fixed }。但在这种情况下这还不够。固定布局意味着浏览器根据列上的显式设置分配列宽，或者根据第一行的单元格设置的宽度，或者在它们不存在时分配列宽缺席时，将列均匀分配可用宽度。在这种情况下，这将导致两个表的列宽不同。

一种简单但有点残酷的方法是在第一个表的<table ...>标记之后另外使用以下标记，设置列宽等于第二个表的宽度：

<col style="width: 6%">
<col style="width: 6%">
<col style="width: 9%">
<col style="width: 7%">
<col style="width: 6%">
<col style="width: 9%">
<col style="width: 6%">
<col style="width: 9%">
<col style="width: 9%">
<col style="width: 3%">
<col style="width: 9%">
<col style="width: 9%">
<col style="width: 3%">
<col style="width: 9%">

更优雅的方法是只使用没有属性的<col>标签，并在CSS中设置列宽（对于两个表）。

无论如何，固定布局的成本很高：它是固定的。使用指定的宽度而不考虑单元格内容。这意味着如果单元格的内容不适合，它将溢出并且通常覆盖相邻单元的一部分。您可以使用overflow属性对此产生影响，但您可以做什么？

以em或ch为单位设置宽度可能是一种更好的方法，但仍然是在黑暗中拍摄的。但是，如果不知道你真正想要做什么（包括百分比来自哪个问题），很难提出更好的方法。

两个表中的不同输出具有相同的百分比

2 个答案: