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高度将显示表格单元格并按宽度和高度使用宽度：auto和height：auto？

2.-可以显示div：table-row的样式是背景宽度和高度吗？

Answer 1

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

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>     */

样式div显示表行可以设置或不设置样式

1 个答案: