Style div display table-row 可以设置样式，也可以不设置

Question

我有一个仅使用 div 的 CSS 表，我需要像这样为 div ROW 设置样式：

<div style="display:table;width:100%;height:80px">
<div style="display:table-row;width:100%;height:80px; background:#333">
  <div style="display:table-cell;width:200px;height:auto"> 1 </div>
  <div style="display:table-cell;width:auto; height:auto"> 2 </div>
  <div style="display:table-cell;width:200px;height:auto"> 3 </div>
</div>

more rows and tds in CSS
</div>

问题：

1.- 因为 div 显示表设置为 80px 高度，所以 div 会显示 table-cell 尊重并使用这些 width:auto 和 height:auto 遵循宽度和高度？

2.- div display:table-row 可以设置背景宽度和高度吗？

Answer 1

对您的两个问题的回答都是肯定的，事实上，您可以使用 CSS 样式对 display:table 做更多的事情

CSS 具有使您希望的任何元素都像表格元素一样表现的属性。您需要像对表格一样构建它们，并且它将受到与表格相同的源顺序依赖关系，但您可以做到。我也不在乎它，它有时真的很有用。如果该布局样式解决了问题并且没有负面顺序影响，请使用它。

不要使用内联样式，而只是为了理解下面的内容：

<section style="display: table;">
  <header style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </header>
  <div style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </div>
</section>

CSS

display: table                /* <table>     */
display: table-cell           /* <td>        */
display: table-row            /* <tr>        */
display: table-column         /* <col>       */
display: table-column-group   /* <colgroup>  */
display: table-footer-group   /* <tfoot>     */
display: table-header-group   /* <thead>     */