当显示的是孩子时，制作div全宽：表格？

正如你可以在片段中看到的那样，div.detail将不会占满全部宽度，即使它被设置为块和宽度：100％。当显示的是孩子时，制作div全宽：表格？

在显示器：表格内部时，我怎样才能使div全宽？

有什么解决方法吗？

.table { 
 
    display: table; 
 
    width: 400px; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 
.td { 
 
    display: table-cell; 
 
    border: 1px solid #ccc; 
 
} 
 
.detail { 
 
    display: block; 
 
    width: 100%; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
    <div class="td">Td</div> 
 
    <div class="td">Td</div> 
 
    <div class="td">Td</div> 
 
    <div class="td">Td</div> 
 
    <div class="td">Td</div> 
 
    </div> 
 
    <div class="detail"> 
 
    Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. 
 
    </div> 
 
    <div class="row"> 
 
    <div class="td">Td</div> 
 
    <div class="td">Td</div> 
 
    <div class="td">Td</div> 
 
    <div class="td">Td</div> 
 
    <div class="td">Td</div> 
 
    </div> 
 
</div>

请注意.td宽度的必须保持灵活，表行和表单元格需要，并且列的宽度必须是行中是一致的。。

我tryied这和：

.detail { display: table-caption; }

几乎做的，但我T改变的元素的顺序..

来源

2015-10-05 Toni Michel Caubet

呀，使用显示：表;在行上。

.row { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%;  
 
} 
 

 
.td { 
 
    display: table-cell; 
 
    text-align: center; 
 
    border: 1px solid #ccc; 
 
    padding: 1em 0; 
 
} 
 
.detail { 
 
    width: 100%; 
 
    background: gold; 
 
}

<div class="row"> 
 
    <div class="td">Td</div> 
 
    <div class="td">Td</div> 
 
    <div class="td">Td</div> 
 
    <div class="td">Td</div> 
 
    <div class="td">Hey, I'm a sentence!</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="detail">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="td">Td</div> 
 
    <div class="td">Td</div> 
 
    <div class="td">Td</div> 
 
    <div class="td">Look man, I'm a sentence too!</div> 
 
    <div class="td">Td</div> 
 
    </div>

来源

2015-10-05 13:11:22 VilleKoo

我已经看到它失败了几次，如果没有一个表之间的行细胞和表.. http://i.imgur.com/EjRbC0f.png（在这个例子中，我刚更新了一列的内容，大小不一致） –

添加table-layout：fixed; on .row元素（？） – VilleKoo

（拼写错误修复）问题，是他们将如何相关？他们是兄弟姐妹，他们没有一个共同的父表格样式。 –

请通过Fiddle

我已经做了一些修改，以CSS为TD作为

.td { border: 1px solid #ccc; width: 19%; float:left; display:table-cell; } 希望这将有助于。

来源

2015-10-05 10:15:44

只是一些修正。如果你包含浮动属性，那么不需要包含显示属性。 –

但我需要的显示：表格单元格，因为我不想担心列的宽度，这就是要使用显示器：表;我编辑了问题，删除.td宽度，然后你的例子不起作用..谢谢！ –

-1

.td { 
     display: inline-block; 
     border: 1px solid #ccc; 
     width: 19%; 
     float:left; 
    } 
    .row { 
     display: inline-block; 
     width: 100% 
    } 
    // max-width is if you want responsive table cells 
    .table { 
     display: table; 
     max-width: 400px; 
    }

添加了.row CSS更好的HTML渲染

来源

2015-10-05 10:36:05 Trimalcione

你错过了显示：table-cell ... –

对不起，没有从[jsfiddle]（https://jsfiddle.net/3kj79hxd/） – Trimalcione

复制该行并且还修复了该行的宽度.td的，我不希望那...请从你的小提琴中删除它，它不会工作 –

-1

<div class="table"> 
    <div class="row"> 
    <div class="table"> 
     <div class="row"> 
      <div class="td">Td</div> 
      <div class="td">Td</div> 
      <div class="td">Td</div> 
      <div class="td">Td</div> 
      <div class="td">Td</div> 
     </div> 
     </div> 
    </div> 
    <div class="detail"> 
    Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. 
    </div> 
    <div class="row"> 
    <div class="table"> 
     <div class="row"> 
      <div class="td">Td</div> 
      <div class="td">Td</div> 
      <div class="td">Td</div> 
      <div class="td">Td</div> 
      <div class="td">Td</div> 
     </div> 
     </div> 
    </div> 
</div>

来源

2015-10-05 12:29:56 MayurG

我见过它失败了几次，如果没有一个表格行之间的单元格和表.. http ：//i.imgur.com/EjRbC0f.png（在这个例子中，我刚刚更新了一列的内容，大小不一致） –

当显示的是孩子时，制作div全宽：表格？

回答

相关问题