为什么我的表格单元格宽度在Chrome中是错误的？ [英] Why is my table cell width wrong in Chrome?

问题描述

我有一张两行的桌子。第一行只有三个单元格。第二行有两个单元格，第一个单元格包含另一个需要填充整个单元格的表格。

 < table border =1style =border-collapse：collapse;> 
< tr> 
< td style =WIDTH：205px;> 1< / td> <！ - 此宽度不适用于Chrome  - > 
< td style =width：100％;> 2< / td> 
< td style =WIDTH：5px;> 3< / td> 
< / tr> 
 
< tr> 
< td colspan =2> 
 
< TABLE width =100％border =1style =border-collapse：collapse; table-layout：fixed;> 
< TR> 
< TD style =width：130px;> 
 A< / TD> 
< TD style =width：90px;> 
 B< / TD> 
< TD style =width：230px;> 
 C< / TD> 
< / TR> 
 
< / TABLE> 
< / td> 
< td> 
 D 
< / td> 
< / tr> 
< / table> 
  

很简单，真的......或者我想过。

它看起来和我在IE中预期的一样。但Chrome似乎没有正确应用第一个单元格的宽度。它似乎受到下面单元格中表格的影响。

为什么会发生这种情况，我该如何解决这个问题？

解决方案

你应该做两件事：

• 在表格元素上，使用 table-layout：fixed;


• 插入列并给它们一个宽度
  
  
  
  • 将宽度分配给第一行的表头/单元格）
  
  

 < table border =1style =table-layout：fixed; width：100％;> 
< colgroup> 
< col style =width：205px;> 
< col style =width：auto;> 
<！ - 使用width：auto;以应用剩余的（未使用的）空间 - > 
< col style =width：5px> 
< / colgroup> 
 
< tr> 
< td> 1< / td> 
< td> 2< / td> 
< td> 3< / td> 
< / tr> 
 
 <！ -   - 等等 - > 
  

I've got a table with two rows. The first row just has three cells. The second row has two cells, with the first cell containing another table that needs to fill the whole cell.

<table border="1" style="border-collapse:collapse;">
    <tr>
        <td style="WIDTH: 205px;">1</td> <!--This width doesn't apply in Chrome-->
        <td style="width:100%;">2</td>
        <td style="WIDTH: 5px;">3</td>
    </tr>                

    <tr>
        <td colspan="2">

                <TABLE width="100%" border="1" style="border-collapse:collapse;table-layout: fixed;">
                    <TR>
                        <TD style="width:130px;">
                            A</TD>
                        <TD style="width:90px;">
                            B</TD>
                        <TD style="width:230px;">
                           C</TD>
                    </TR>

                </TABLE>        
        </td>
        <td>
            D
        </td>
    </tr>
</table>  

Simple enough, really....or so I thought.

It appears as I would expect in IE. But Chrome seems to not apply the width of the first cell correctly. It seems to be affected by the table in the cell below.

Why is this happening, and how can I get around this?

解决方案

Two things you should do:

• On the table element, use table-layout: fixed;
• Insert columns and give them a width
  • (You could also assign width to table headers/cells of the first row)

Like this:

<table border="1" style="table-layout: fixed; width: 100%;">
    <colgroup>
        <col style="width: 205px;">
        <col style="width: auto;">
          <!-- Use "width: auto;" to apply the remaining (unused) space -->
        <col style="width: 5px">
    </colgroup>

    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr> 

    <!-- Etc. -->

这篇关于为什么我的表格单元格宽度在Chrome中是错误的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！