使用display: table佈局可通過非表格元素實(shí)現(xiàn)類似HTML表格的排列效果，適用於垂直居中、對(duì)齊和響應(yīng)式設(shè)計(jì)。 1. 使用display: table創(chuàng)建類表格容器；2. 子元素設(shè)為display: table-cell以實(shí)現(xiàn)單元格對(duì)齊；3. 用display: table-row定義行結(jié)構(gòu)；4. 結(jié)合vertical-align實(shí)現(xiàn)垂直居中；5. 利用table-layout控制列寬分配。這種方式在不依賴flexbox時(shí)提供穩(wěn)定的對(duì)齊與自適應(yīng)佈局方案。

You can use display: table and its related properties to create layout structures that behave like HTML tables, but without using actual <table> elements. This is useful when you want certain alignment or spacing behaviors similar to tables — especially for vertically centering content or making elements stretch evenly. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175372834394923.jpeg" class="lazy" alt="How do you use the `display: table` and related properties?"><h3 id="When-You-Want-a-Table-Like-Container"> When You Want a Table-Like Container</h3> <p> Use <code>display: table on a container element (like a div) to make it behave like a <table> . It won't have borders by default, but it will size itself based on its contents, just like a real table.<ul><li> Add <code>display: table-cell to child elements to mimic <td> behavior.<li> Use <code>display: table-row for elements that should act like table rows.

For example:

 <div   style="max-width:90%">
  <div style="display: table-row;">
    <div style="display: table-cell;">Left</div>
    <div style="display: table-cell;">Right</div>
  </div>
</div>

This creates two side-by-side columns that always stay aligned, even with different content heights.

For Vertical Centering Without Flexbox

If you're trying to vertically center something inside a container and don't want to use flexbox or grid (maybe for older browser support), display: table-cell can help.

Set the parent to display: table , and the child (or a wrapper around the content) to display: table-cell , then apply vertical-align: middle .

Example:

 <div   style="max-width:90%">
  <div style="display: table-cell; vertical-align: middle;">
    Vertically centered text
  </div>
</div>

This works well in situations where flexbox might be overkill or unsupported.

To Match Table Layout Behavior

Sometimes you want your layout to adapt like a table does — shrinking to fit content, keeping columns aligned, or distributing space evenly.

Using display: table makes the container respect table layout rules:

• Cells automatically align vertically.
• The whole structure adjusts based on content unless you lock sizes.
• You can use table-layout: fixed to control how columns are sized.

This can be handy in responsive layouts or when building reusable UI components where consistent spacing matters.

That's basically how and why you'd reach for display: table and its related values. It's not flashy, but it gets the job done in cases where you want predictable alignment and sizing without relying on newer layout methods.

以上是您如何使用'顯示：表”和相關(guān)屬性？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！