当 child 来自 display:table 时，制作 div 全角？

Question

正如您在代码片段中看到的那样，div.detail 不会占据全宽，即使它设置为 block 和宽度：100%。

如何在 display:table 内部制作 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 宽度必须保持灵活，并且 table-row 和 table-cell 是必需的，并且列的宽度必须是行间一致..

我尝试了这个并且：

.detail { display: table-caption; }

几乎做到了，但是它改变了元素的顺序..

Answer 1

请通过Fiddle

我对 CSS 进行了一些更改，因为 td 为

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

Answer 2

    .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 渲染

Answer 3

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

Answer 4

是的，使用显示：table；在行上。

.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>

当 child 来自 display:table 时，制作 div 全角？

Make a div full width when is a child from display:table?

html

css

width

css-tables