Use CSS to improve table presentation Performance

Source: Internet
Author: User
Although div + css is very popular and standard, it is still necessary to use a table where it should be used. Instead of using a div, the time spent is not worthwhile and does not comply with W3C standards.
Table layout does not comply with W3C standards. One of them is that tables cannot be conveniently laid out. It is ideal for table to present data, however, the browser's explanation of the table will also be a key aspect of table performance during presentation.
By default, the Web browser (IE) starts to display all the tables after the entire table is downloaded. Friends who used to use the "cat" to access the Internet have this experience, when the network speed is slow, the page is displayed in half. Is there a way to display a row in a table? CSS has an attribute that may meet your requirements to display a row in a table. This attribute is described below:

Table-layout
Version: CSS2 compatibility: IE5 + inheritance: No Syntax:Table-layout:Auto|FixedValid value:

Auto : Default Value. The default automatic algorithm. The layout is based on the content of each cell. The table is displayed after all the content in each cell is read and computed.
Fixed : Fixed Layout Algorithm. In this algorithm, the width of tables and columns depends onColThe total width of the object. If not specified, it depends on the width of each cell in the first row. If the table does not specify the width attribute, the default width of the table to be presented is100%.
Description: sets or retrieves the Layout Algorithm of a table.
You can use this attribute to improve the table presentation performance. This attribute causes IE to submit the table content in one row at a time, so that it can be provided to information users more quickly. In this order, this attribute uses one of the following methods to deploy the table column width:
  1. UseColOrColGroupObject width (Width) Attribute information.
  2. Use the cell width (Width) Information.
  3. The table width is equal to the number of columns in the table. Regardless of the actual width of the table content.

If the content of a cell exceeds the column width, the content will be wrapped in a line break. If a line break cannot be entered, the content will be cropped. If this attribute is setFixedOverflow can be used to control the processing of overflow cells (Td. If the table row height is specified, the line feed content is cropped vertically if it exceeds the specified table row height.
Set this property valueFixedTo improve table performance. This is especially effective for long tables.
Setting the table row height can further improve the submission speed. the browser does not need to check the content of each cell in the row to determine the Row Height to start parsing and submission.
This propertyCurrentStyleThe object is read-only. Other objects can be read and written.
Corresponding script features:TableLayout.
Example: table {table-layout: fixed;} is applied:

IE5.0 + CurrentStyleruntimeStylestyleTABLE

Fixed layout algorithms are much faster than default automatic algorithms.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.