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

问题描述

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

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.

它在 IE 中的表现正如我所期望的那样.但是 Chrome 似乎没有正确应用第一个单元格的宽度.它似乎受到下面单元格中表格的影响.

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?

推荐答案

你应该做的两件事:

• 在table元素上，使用table-layout: fixed;
• 插入列并为其指定宽度
  • (您也可以为第一行的表格标题/单元格分配宽度)

  像这样:

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