使用div而不是tables标签在没有bootstrap的情况下响应

时间：2017-07-11 10:14:36

标签： html css css-tables tabular

我试图创建下表：但我需要使用DIV而不是表。我想要创建的结构：

enter image description here

我必须有3个全局Div而不使用任何表格标签。我不知道如何在没有表格标签的情况下做到这一点，这里只有我尝试的div codepen link

＆＃13;
＆＃13; 
.wrapTableTech {
  display: table;
  width: 100%;
  height: 14rem;
  border: 2px solid;
}

.blocTech {
  display: table-header-group;
  background-color: gray;
}

.tech-cell {
  display: table-cell;
  text-align: justify;
  padding: 10px;
  border: 2pxsolid red;
  text-align: center;
}

.blocCat {
  display: table-row-group;
  background-color: gray;
  text-align: center;
}

.tech-row {
  display: table-row;
  border: 2px solid green;
}
＆＃13; 
<div class="wrapTableTech">
  <div class="blocTech">
    <div class=""></div>
    <div class="tech-cell">Tech 1</div>
    <div class="tech-cell">Tech 2</div>
    <div class="tech-cell">Tech 3</div>
    <div class="tech-cell">Tech 4</div>
  </div>
  <div class="blocCat">
    <div class="tech-row">PTI</div>
    <div class="tech-row">HO</div>
    <div class="tech-row">OP</div>
    <div class="tech-row">AS</div>
  </div>
  <div class="blocValue">
    <div>1</div>
    <div>4</div>
    <div>6 hours</div>
    <div>2</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

在没有引导程序的情况下尝试以下css和Html：

.wrapTableTech {
    width: 100%;
    border: 2px solid;
    float: left;
    width: 100%;
}
.blocTech {
    background-color: gray;
    float: left;
    width: 20%;
}
.tech-cell {
  text-align: justify;
  padding: 10px;
  border: 2px solid red;text-align:center;
}
.blocCat {
    background-color: gray;
    text-align: center;
    float: left;
    width: 80%;
}
.tech-row {
    border: 2px solid green;
    float: left;
    width: 24%;
    padding: 10px 0;
}
<div class="wrapTableTech">
  <div class="blocTech">
    <div class="tech-cell">&nbsp;</div>
    <div class="tech-cell">PTI</div>
    <div class="tech-cell">HO</div>
    <div class="tech-cell">OP</div>
    <div class="tech-cell">AS</div>
  </div>
  <div class="blocCat">
    <div class="blocvalue">
      <div class="tech-row">Tech 1</div>
      <div class="tech-row">Tech 2</div>
      <div class="tech-row">Tech 3</div>
      <div class="tech-row">Tech 4</div>
    </div>
    <div class="blocvalue">
      <div class="tech-row">1</div>
      <div class="tech-row">4</div>
      <div class="tech-row">6 Hours</div>
      <div class="tech-row">4</div>
    </div>
    <div class="blocvalue">
      <div class="tech-row">2</div>
      <div class="tech-row">5</div>
      <div class="tech-row">3 Hours</div>
      <div class="tech-row">2</div>
    </div>
    <div class="blocvalue">
      <div class="tech-row">1</div>
      <div class="tech-row">4</div>
      <div class="tech-row">6 Hours</div>
      <div class="tech-row">4</div>
    </div>
    <div class="blocvalue">
      <div class="tech-row">2</div>
      <div class="tech-row">5</div>
      <div class="tech-row">3 Hours</div>
      <div class="tech-row">5</div>
    </div>
    
  </div>
</div>

答案 1 :(得分：0)

.wrapTableTech {
  display: table;
  width: 100%;
  height: 14rem;
  border: 2px solid;
}
.blocTech {
  display: table-header-group;
  background-color: gray;

}
.tech-cell {
  display: table-cell;
  text-align: justify;
  padding: 10px;
  border: 2px solid red;text-align:center;
}
.blocCat {
  display: table-row-group;
  background-color: gray;text-align: center;
  
}
.tech-row {
  display: table-row;
  border: 2px solid green;
}
    <div class=" row wrapTableTech">
      <div class="blocTech">
        <div class="col-sm-4"></div>
        <div class="col-sm-2 tech-cell">Tech 1</div>
        <div class="col-sm-2 tech-cell">Tech 2</div>
        <div class="col-sm-2 tech-cell">Tech 3</div>
        <div class="col-sm-2 tech-cell">Tech 4</div>
      </div>
      <div class="blocCat">
        <div class="col-sm-2 blocValue tech-cell">PTI</div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
      </div>
     <div class="blocCat">
        <div class="col-sm-2 blocValue tech-cell">HO</div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
            <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
      </div>
       <div class="blocCat">
        <div class="col-sm-2 blocValue tech-cell">OP</div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
      </div>
       <div class="blocCat">
        <div class="col-sm-2 blocValue tech-cell">AS</div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
      </div>
    </div>

答案 2 :(得分：0)

尝试理解div是一个容器。 因此，结构必须是分层的才能解决这个问题，但不能分成3个不同的单个div（=容器）。

尝试类似：

＆＃13;
＆＃13; 
  .wrapTableTech {
    display: table;
    width: 100%;
    height: 14rem;
    border: 2px solid;
  }
  .blocTech {
    display: table-header-group;
    background-color: gray;

  }
  .tech-cell {
    display: table-cell;
    text-align: justify;
    padding: 10px;
    border: 2px solid red;
    text-align:center;
  }
  .blocCat {
    display: table-row-group;
    background-color: gray;text-align: center;

  }
  .tech-row {
    display: table-row;
    border: 2px solid red;
  }

  .tech-RowTitle {
   display: table-cell;
    text-align: justify;
    padding: 10px;
    border: 2px solid red;
    text-align:center;
  }

  .tech-value {
    display: table-cell;
    text-align: justify;
    padding: 10px;
    border: 1px solid red;
    text-align:center;
    background-color: white;
  }
＆＃13; 
<div class="wrapTableTech">
  <div class="blocTech">
    <div class="tech-cell"></div>
    <div class="tech-cell">Tech 1</div>
    <div class="tech-cell">Tech 2</div>
    <div class="tech-cell">Tech 3</div>
    <div class="tech-cell">Tech 4</div>
  </div>
  <div class="blocCat">
    <div class="tech-row"> 
      <div class="tech-RowTitle">PTI</div>
      <div class="tech-value">1.1</div>
      <div class="tech-value">1.2</div>
      <div class="tech-value">1.3</div>
      <div class="tech-value">1.4</div>
    </div>
    <div class="tech-row">
       <div class="tech-RowTitle">HO</div>
       <div class="tech-value">2.1</div>
       <div class="tech-value">2.2</div>
       <div class="tech-value">2.3</div>
       <div class="tech-value">2.4</div>
    </div>
    <div class="tech-row">
       <div class="tech-RowTitle">OP</div>
       <div class="tech-value">3.1</div>
       <div class="tech-value">3.2</div>
       <div class="tech-value">3.3</div>
       <div class="tech-value">3.4</div>
    </div>
    <div class="tech-row">
       <div class="tech-RowTitle">AS</div>
       <div class="tech-value">4.1</div>
       <div class="tech-value">4.2</div>
       <div class="tech-value">4.3</div>
       <div class="tech-value">4.4</div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题