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

Definition and Usage

The display property specifies the type of box an element should generate.

illustrate

This attribute is used to define the type of display frame that the element generates when building a layout. For document types such as HTML, using display can be dangerous if not careful, because it can violate the display hierarchy defined in HTML. With XML, since XML has no such hierarchy built into it, all display is absolutely necessary.
Possible values

Elements with display: table-cell set:

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

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

display: table; The outer layer defines the width and height, and the content inside adapts to the width and height. If the child element is a div, the width of each column is not equally divided. Therefore, it is recommended to use li tags for child elements

.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 adaptive height and width of CSS display table. For more relevant content about adaptive CSS display table, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that you will support 123WORDPRESS.COM in the future!