当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How do I get the table header to span the whole table when using display properties to emulate a <table>?

问题描述:

I have replaced an old table with a new one made out of Divs and everything works fine except for one thing.

I want to have a header that is Spanning over the hole width of the Table but not as in the table-heading css clas where you have multiple cells in the heading.

I just cant get it to work I tried colspan but since this isnt a thing for divtables this did not work.

Here is a small example of my table.

.divTableCell{

border: 1px solid #999999;

display: table-cell;

padding: 3px 10px;

background-color: #ffffff;

width: 50%;

}

.divTableRow {

display: table-row;

width: 100%;

}

 <div class="divTableRow">

<div class="divTableCell">1</div>

<div class="divTableCell">2</div>

<div class="divTableCell">3</div>

</div>

网友答案:

You can try to make the header a table-caption. See example below:

.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>
网友答案:
.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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: