html css div开发table表格

最新推荐文章于 2024-09-22 02:28:30 发布

bluemengcom

最新推荐文章于 2024-09-22 02:28:30 发布

阅读量1.2k

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/bluemengcom/article/details/131153375

版权

有时候项目中需要用到div开发类似表格功能，更加容易实现自己需要定制功能如下。

先开发代码如下：

<div class="table">
                      <div class="row header">
                    <div class="cell">编号</div>
                    <div class="cell">姓名</div>
                  </div>
                  <div class="row">
                    <div class="cell">电压等级</div>
                    <div class="cell">电压区间</div>
                  </div>
                  <div class="row">
                    <div class="cell">过电压</div>
                    <div class="cell">
                      <div class="cell-box">
                        <div>&ge;</div>
                        <input type="text" value="10.7">
                        <div>kV</div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="cell">正常二级</div>
                    <div class="cell">
                      <div class="cell-box">
                        <input type="text" value="9.8">
                        <div>kV</div>
                        <div>~</div>
                        <input type="text" value="10.7">
                        <div>kV</div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="cell">正常一级</div>
                    <div class="cell">
                      <div class="cell-box">
                        <input type="text" value="9.3">
                        <div>kV</div>
                        <div>~</div>
                        <input type="text" value="9.8">
                        <div>kV</div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="cell">一般低压</div>
                    <div class="cell">
                      <div class="cell-box">
                        <input type="text" value="8.7">
                        <div>kV</div>
                        <div>~</div>
                        <input type="text" value="9.3">
                        <div>kV</div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="cell">严重低压</div>
                    <div class="cell">
                        <div class="cell-box">
                          <div>&le;</div>
                          <input type="text" value="8.7">
                          <div>kV</div>
                        </div>
                    </div>
                  </div>
</div>

css代码如下：

.table {
  display: table;
  border-collapse: collapse;
  margin-bottom: 20px;
  width: 80%;
}

.row {
  display: table-row;
}

.header .cell {
  font-weight: bold;
  text-align: center;
  background-color: #ccc;
  padding: 5px;
  border: 1px solid #aaa;
}

.cell {
  display: table-cell;
  text-align: center;
  padding: 5px;
  vertical-align: middle; /* 子元素默认垂直居中 */
  border: 1px solid #aaa;
  .cell-box{
    display: flex;
    align-items: center;
    justify-content: center;
    input{
      width:40px;
      border:1px solid #ccc;
      margin-left: 4px;
      margin-right: 4px;
    }
  }
}