Shulou(Shulou.com)06/03 Report--

How to build CSSdisplay attributes of the table table layout, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

The table realized by DIV+CSS is encountered in the project transformation, and the new requirements need to use cell merging in the table. The online survey shows that the table table realized by CSS display:table has no cell attributes and styles. After some thinking, it turns out that the merging of cells is realized, that is, the DIV of a separate display:table is nested in the positive row, and then the cell merge is realized by controlling the number of rows and the height of the rows inside the nested table DIV. Personally, it is recommended to use HTML tags for a new implementation.

1. Explanation of the attributes related to the table layout of CSS display attributes:

Table this element is displayed as a block-level table (similar), with line breaks before and after the table.

Table-row-group this element is displayed as a grouping of one or more rows (similar).

Table-header-group this element is displayed as a grouping of one or more rows (similar).

Table-footer-group this element is displayed as a grouping of one or more rows (similar).

Table-row this element is displayed as a table row (similar).

Table-column-group this element is displayed as a grouping of one or more columns (similar).

Table-column this element is displayed as a cell column (similar)

Table-cell this element is displayed as a table cell (similar to and)

Table-caption this element is displayed as a table title (similar)

Sample code

1. General form

XML/HTML Code copies content to the clipboard

Display normal form .table, .table * {margin: 0 auto; padding: 0 table-tr Fontmuri size: 14pxEverest family: Arial, Arial, Helvetica, sans-serif;} .table {display: table; width: 80%; border-collapse: collapse;} .table-tr {display: table-row; height: 30px;} .table-th {display: table-cell;font-weight: bold;height: 100% border 1px solid gray;text-align: center;vertical-align: middle Background-color:#E5E5E5;} .table-td {display: table-cell; height: 100% control border: 1px solid gray; text-align: center;vertical-align: middle } provinces / municipalities directly under the Central Government GDP growth rate Guangdong 72812 8.0% Henan 37010 8. 3% Jiangsu 70116 8.5%

Running effect

2. Implement the table by column merging

Implementation idea: based on the table implementation of display:table, there is no implementation of merging rowspan and colspan cells, so the tortuous implementation is that each row of the table is nested into an independent table, so that cell merging can be realized by controlling the number of rows and columns of the nested table and the width and height of the cell.

XML/HTML Code copies content to the clipboard

Merge table based on display column. Table, .table * {margin: 0 auto; padding: 0 position Fontmuri size: 14pxx Fontmuri family: Arial, Arial, Helvetica, sans-serif;} .table {display: table; width: 80%; border-collapse: collapse;}. Table-tr {display: table-row; height: 30px;} .table-th {display: table-cell;font-weight: bold;height: 100% border: 1px solid gray;text-align: center Vertical-align: middle;background-color:#E5E5E5;}. Table-td {display: table-cell; height: 100%;} .sub-table {width: 100% height: 100% table-tr: table;} .sub-table-tr {display: table-row; height: 100%;} .sub-table-td {display: table-cell; height: 100% border: 1px solid gray; text-align: center;vertical-align: middle } GDP growth rate of provinces / municipalities directly under the Central Government Guangdong 72812 8.0% Henan 37010 8.3% Jiangsu 70116 8.5% The average GDP growth rate of each province / municipality is 8.26%.

Running effect

3. Row merge table

The implementation idea of row merging: similar to the implementation idea of column merging, the columns with cell merging will be nested with a DIV whose display is table, height = single row height * multiple of the number of cell merges, and other columns of the same row will also be nested separately with DIV. The example code is as follows

XML/HTML Code copies content to the clipboard

Display-based row merge table .table, .table * {margin: 0 auto; padding: 0bot Fontmuri size: 14pxbot Fontmuri family: Arial, Arial, Helvetica, sans-serif;} .table {display: table; width: 80%; border-collapse: collapse;}. Table-tr {display: table-row; height: 30px;} .table-th {display: table-cell;font-weight: bold;height: 100% border: 1px solid gray;text-align: center Vertical-align: middle;background-color:#E5E5E5;}. Table-td {display: table-cell; height: 100%;} .sub-table {width: 100% height: 100% table-tr: table;} .sub-table-tr {display: table-row; height: 100%;} .sub-table-td {display: table-cell; height: 100% border: 1px solid gray; text-align: center;vertical-align: middle } GDP growth rate of provinces / municipalities directly under the Central Government Guangdong 72812 8.0% Henan Jiangsu Province 37010 70116 8.4% The average GDP growth rate of each province / municipality is 8.26%.

Running effect:

After reading the above, have you mastered how to build the layout of the table table with CSSdisplay attributes? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.