Question

我已经用Divs替换了一张旧桌子，除了一件事情以外，一切都很好。我希望有一个跨越表的孔宽的标题，但不是在表标题css clas中，标题中有多个单元格。我只是不能让它工作我尝试了colspan，但因为这不是divtables的事情，这不起作用。

这是我的表的一个小例子。

＆＃13 ;

＆＃13;

.divTableCell{
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
    background-color: #ffffff;
    width: 50%;
}
.divTableRow {
    display: table-row;
    width: 100%;
}

＆＃13;

  <div class="divTableRow">
    <div class="divTableCell">1</div>
    <div class="divTableCell">2</div>
    <div class="divTableCell">3</div>
  </div>

＆＃13;

每当我尝试使用Talbe标题类创建标题时，它只适合左表格单元格。

感谢您的帮助。

Answer 1

您可以尝试将标题设为表格标题。见下面的例子：

.divTableCell{
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
    background-color: #ffffff;
    width: 50%;
}
.table {
    display: table;
}
.divTableRow {
    display: table-row;
    width: 100%;
}
.header {
    display: table-caption;
    border: 1px solid #ccc;
}

  <div class="table">
  <div class="header"> This is a test</div>
  <div class="divTableRow">
    <div class="divTableCell">1</div>
    <div class="divTableCell">2</div>
    <div class="divTableCell">3</div>
  </div>
 </div>

Answer 2

.divTableCell{
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
    background-color: #ffffff;
    width: 50%;
}
.divTableRow {
    display: table-row;
    width: 100%;
}

<div style="width:100%;">
<div style="border:1px solid #000;" ><b>header</b></div>
<div class="divTableRow">
    <div class="divTableCell">1</div>
    <div class="divTableCell">2</div>
    <div class="divTableCell">3</div>
</div>
</div>

在使用显示属性模拟a时，如何让表头跨越整个表？

2 个答案: