Question

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

如何在显示屏内显示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宽度必须保持灵活，并且表格行和表格单元格是必需的，并且列的宽度必须在行之间保持一致..

我试过这个并且：

.detail { display: table-caption; }

几乎可以，但它会改变元素的顺序..

Answer 1

是的，使用display：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>

Answer 2

请浏览Fiddle

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

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

Answer 3

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

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

如果是来自display：table的子项，请设为div全宽？

4 个答案: