Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is my table cell width wrong in Chrome?

Tags:

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.

enter image description here

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

like image 818
Urbycoz Avatar asked Aug 31 '12 09:08

Urbycoz


People also ask

How do you fix the width of a table cell?

Select your table. On the Layout tab, in the Cell Size group, click AutoFit. Click Fixed Column Width.

How do I fix the width of a table in HTML?

To set the table width in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property width.

Does chrome apply the width of the first cell correctly?

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

What does stop using to set table width in HTML mean?

What does Stop Using To Set Table Width In HTML: Here's Why do? Was used to set the width of a table data cell to a value that would override the default width. This attribute has been deprecated.

How do I adjust the width of a column in HTML?

Adjusting Table Column Width The width attribute, now deprecated, was once the correct way to adjust the width of a table’s columns. By default, a browser will adjust table columns to fit the contents of the table. However, if you want to control the width of each column, you can do so by adjusting the width of each <td> or <th> of a single row.

How to control the layout of data cells in HTML tables?

Use CSS to control layout of data cells in HTML tables. The width attribute, now deprecated, was once the correct way to adjust the width of a table's columns. By default, a browser will adjust table columns to fit the contents of the table.


1 Answers

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. --> 
like image 117
Richard de Wit Avatar answered Oct 24 '22 16:10

Richard de Wit