Menu
Setting width for table cell using colgroup not works in IE9
<table id="Grid1_Table" class="Table">
<colgroup>
<col style="width:20px">
<col style="width:20px">
<col style="width:180px">
<col style="width:200px">
</colgroup>
<tbody>
<tr>
<td class="RowHeader"><div> </div></td>
<td class="RecordPlusCollapse"><div> </div></td>
<td colspan="2" class="GroupCaption">Order ID: 0 - 1 Items</td>
</tr>
</tbody>
</table>
.RowHeader
{
background-color : black;
}
.GroupCaption
{
background-color : #868981;
}
.RecordPlusCollapse
{
background-color : red;
}
.Table{
width: 100%;
}
First 2 <td> width is not as colgroup in IE9. Not sure why width differs.
http://jsfiddle.net/KgfsM/3/
423
Using width attribute: The <td> tag has width attribute to control the width of a particular column. By assigning a numeric value to this attribute between 0 to 100 in terms of percentage(or you can use pixel format). We can restrict the column width up to that much percentage of the table's total width.
However, most of the HTML colgroup attributes have been deprecated, and they are shown in the following list: align – used to specify the horizontal alignment of each column cell. bgcolor – used to alter the background color of the cells.
The width of the columns i.e. td in a table can be fixed very easily. This can be done by adding the width attribute in the <td> tag. If the width is not specified, the width of the column changes according to the change in the content. The specifications of width for the columns can be in pixels, or percentage.
Using table-layout: fixed as a property for table and width: calc(100%/3); for td (assuming there are 3 td 's). With these two properties set, the table cells will be equal in size.
You are giving the table 100% width and then go for fixed width cols. Where should the browser take the missing width from? It simply stretches the table cells.
Look at this example, works in every major browser, starting with IE 5(!) :) http://jsfiddle.net/Volker_E/ppRgV/1/
Changes were stripping width: 100%; from table and adding table-layout: fixed;
.Table {
table-layout: fixed;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
