Solution to the problem of adaptive height and width of CSS display table

Time:2021-7-29

Definition and Usage

The display attribute specifies the type of box that the element should generate.

explain

This attribute is used to define the type of display box generated by the element when the layout is established. For document types such as HTML, it is dangerous to use display carelessly, because it may violate the display hierarchy already defined in HTML. For XML, since XML has no built-in hierarchy, all displays are absolutely necessary.
Possible values

value describe
none This element is not displayed.
block This element is displayed as a block level element with a line break before and after it.
inline Default. This element is displayed as an inline element without a line break before and after the element.
inline-block Inline block element( Css2.1 (new value)
list-item This element is displayed as a list.
run-in This element is displayed as a block level element or an inline element depending on the context.
compact There is a value compact in CSS, but it has been removed from CSS 2.1 due to the lack of broad support.
marker There is a value marker in CSS, but it has been removed from CSS 2.1 due to the lack of broad support.
table This element is displayed as a block level table, similar to table, with line breaks before and after the table.
inline-table This element will be displayed as an inline table, similar to table, without line breaks before and after the table.
table-row-group This element is displayed as a group of one or more rows, similar to tbody.
table-header-group This element is displayed as a group of one or more rows, similar to thead.
table-footer-group This element is displayed as a group of one or more rows, similar to tFoot.
table-row This element appears as a table row similar to tr.
table-column-group This element is displayed as a group of one or more columns, similar to colgroup.
table-column This element is displayed as a cell column, similar to col
table-cell This element is displayed as a table cell, similar to TD and th
table-caption This element is displayed as a table title, similar to caption
inherit The value of the specified display element should inherit from the parent attribute.

Elements with display: table cell set:

  • Sensitive to width and height
  • No response to margin value
  • Response padding property
  • When the content overflows, the parent element will be automatically expanded

The effect picture implemented above is that the left avatar part uses the float left floating attribute, and the right side uses display: table cell to realize two column adaptive layout.

display: table; The outer layer defines the width and height, and the inner content adapts to the width and height. If the child element is div, the width of each column is not equal. Therefore, it is recommended that the child elements be labeled with Li


.css-table {
      display: table;
      height: 2rem;
      width: 5rem;
  }
  .css-table-bg {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      background-color: coral;
  }
  .css-table li {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      background-color:darkkhaki;
  }


    <div class="css-table">
     <div class="css-table-bg">1</div>
        <div class="css-table-bg">2</div>
        <div class="css-table-bg">3</div>
    </div>
    <div class="css-table">
        <ul> 
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Clients</a></li>
        </ul>
    </div>

This is the end of this article about how to solve the problem of CSS display table adaptive height and width. For more relevant CSS display table adaptive content, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

VBS obtains the operating system and its version number

VBS obtains the operating system and its version number ? 1 2 3 4 5 6 7 8 9 10 11 12 ‘************************************** ‘*by r05e ‘* operating system and its version number ‘************************************** strComputer = “.” Set objWMIService = GetObject(“winmgmts:” _  & “{impersonationLevel=impersonate}!\\” & strComputer & “\root\cimv2”) Set colOperatingSystems = objWMIService.ExecQuery _  (“Select * from […]