两个表中的不同输出具有相同的百分比[英]Different output in two tables with the same percentage 本文翻译自 William 查看原文 2014-09-29 191 css/

In this link http://jsfiddle.net/w9xxgxwm/4/ you can see my tables. The point is, I want that my table (the 2nd one) have the exact size of the 1st table. I want that the borders matches with the 1st one.

在这个链接http://jsfiddle.net/w9xxgxwm/4/你可以看到我的表格。关键是,我希望我的表(第二个)具有第一个表的确切大小。我希望边界与第一个相匹配。

The size of the <td> tags are the same, so I don't understand why the tables have different sizes. The percentage attribute shouldn't be taking care of this problem?

标签的大小是相同的,所以我不明白为什么表有不同的大小。百分比属性不应该处理这个问题?

The main table code is:

主表代码是:

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

But you can see the output on the jsfiddle link I put.

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

2 个解决方案

#1

By default, table layout is “automatic”, which means that column widths are allocated by the browser according to the width requirements of cells. In this model, any widths that you set are taken just as suggested minimal widths.

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

To get “fixed table layout”, you can set table { table-layout: fixed }. But this is not sufficient in this case. Fixed layout means that the browser allocates column widths according to explicit settings on columns or, in their absence, according to width set for the cells of the first row or, in their absence too, divides the available width evenly for the columns. In this case, this would result in different column widths for the two tables.

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

A simple, though a bit brutal, way is to additionally use the following tags right after the the <table ...> tag of the first table, setting column widths equal to those of the second 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%">

A more elegant way would be to have just <col> tags without attributes and set the column widths in CSS (for both tables).

更优雅的方法是只使用没有属性的标签,并在CSS中设置列宽(对于两个表)。

Anyway, fixed layout has a serious cost: it is fixed. The specified widths are used with no regard to cell contents. This means that if the content of a cell does not fit in, it will overflow and typically cover part of adjacent cell(s). You can affect this with the overflow property, but what could you do?

无论如何,固定布局有一个严重的成本:它是固定的。使用指定的宽度而不考虑单元格内容。这意味着如果单元格的内容不适合,它将溢出并且通常覆盖相邻单元的一部分。你可以用overflow属性来影响这个,但你能做什么?

Setting widths in em or ch units might be a better approach, though still a shot in the dark. But it is difficult to suggest a better way without knowing what you are really trying to do (including the question where the percentages come from).

以em或ch为单位设置宽度可能是一种更好的方法,尽管在黑暗中仍然是一个镜头。但是,如果不知道你真正想要做什么(包括百分比来自何处的问题),很难提出更好的方法。

#2

Change your table to have another row inside the same table, like this:

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

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

I also cleaned and mdified your CSS a bit

我也清理并修改了你的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

在这里看小提琴

#1