Geek Answers Handbook

HTML spreadsheet for some columns, fixed width for others

I am trying to create a table that adheres to the following requirements:

  • The width of the table should be defined as 0 - the browser should calculate the width according to the width of the column (this should be provided for the plugin with the column size).
  • Some columns may take a fixed width (e.g. 50px);
  • Columns that do not get a fixed width should automatically match the content.

I created a small example to illustrate the problem - since you can see that column 3 remains at width 0 and therefore is not displayed.

EDIT . If "table-layout: fixed" is deleted. a third column appears, but fixed widths are ignored, and all columns become auto-adjustable.

HTML

<table> <tr> <td class="cell header" id="header1">Header 1</td> <td class="cell header" id="header2">Header 2</td> <td class="cell header" id="header3">Header 3</td> </tr> <tr> <td class="cell">Cell 1</td> <td class="cell">Cell 2</td> <td class="cell">Very looooong content</td> </tr> </table>

CSS

 table { table-layout: fixed; width: 100%; border: 1px solid #696969; } .cell { color: #898989; border: 1px solid #888; padding: 2px; overflow: hidden; } .header { background-color: lightsteelblue; color: black; } #header1, #header2 { width: 50px; }

Is it possible? Any help would be appreciated ...

+4
source share
1 answer

This is not possible with a table layout: fixed and width 0 on your table.

Create the W3 Spec Section 17.5.2.1 :

In a fixed layout table algorithm, the width of each column is equal to as follows:

  • A column element with a value other than 'auto' for the 'width' property sets the width for this column.
  • Otherwise, the cell in the first row with a value other than "auto" for the width property determines the width for this column. If a cell spans more than one column, the width is divided into columns.
  • Any remaining columns equally divide the remaining horizontal table space (minus the borders or space between cells).

However, when you perform auto-layout (described in section 17.5.2.2), your widths will move around your content and use only the width, if possible. For example, if the sum of the minimum width of each column exceeds the width of the container of your table, everything will move around so that it does not depend on the width that you set.

It should also be noted that:

Users are not required to implement this algorithm to determine the layout of the table in the case where the "table-layout" is "auto"; they can use any other algorithm, even if this leads to behavior.

So, it seems that the answer is, unfortunately, a long "no" :(

+5
source

More articles:


All Articles