Html 样式div显示表行可以设置样式，也可以不设置样式

我有一个仅使用div的CSS表，我需要将样式设置为div行，如下所示：

<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.
2.
3.
CSS中的更多行和tds

问题:

1.-因为div display table设置为80px height，divs display table cell是否会使用这些width:auto和height:auto来遵循宽度和高度

---

2.-divs display:table行是否可以使用背景宽度和高度设置样式？

您的两个问题的答案都是肯定的，事实上，您可以使用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>     */

display:table/**/
显示：表格单元格/**/
显示：表格行/**/
显示：表列/**/
显示：表列组/**/
显示：表尾组/**/
显示：表格标题组/**/

谢谢你，朋友。只是一个小问题：要使用这些div，因为它是一个3列模板，我是否需要在使用这种css表时设置float:left、none和right？创建表结构不需要float表单元级元素。