[原生table] table td 下的内容高度100%自适应

最新推荐文章于 2025-03-19 23:46:53 发布

lyt-top

最新推荐文章于 2025-03-19 23:46:53 发布

阅读量862

点赞数 4

文章标签：前端 css html

本文链接：https://blog.youkuaiyun.com/qq_34450741/article/details/140724552

版权

top、效果图

在这里插入图片描述

一、顶级设置高度 `100%`，`重点`

.table-warp {
	height: 100%;
}

二、css 代码

.table-warp {
   height: 100%;
 }
 table {
   border-collapse: collapse;
   border-spacing: 0px;
   table-layout: fixed;
   width: 300px;
   height: 100%;
 }
 tr > td,
 tr > th {
   border: 1px solid red;
   word-wrap: break-word;
   height: 100%;
 }
 .item {
   display: flex;
   height: 100%;
 }
 .label {
   display: flex;
   align-items: center;
   height: 100%;
   width: 60px;
   background-color: aqua;
   padding: 10px;
   box-sizing: border-box;
 }
 .value {
   display: flex;
   align-items: center;
   height: 100%;
   flex: 1;
   margin: auto;
 }
 input {
   width: 100%;
 }

三、html 代码

<div class="table-warp">
   <table>
     <tr>
       <th>姓</th>
       <th>名</th>
     </tr>
     <tr>
       <td>
         <div class="item">
           <div class="label">我是标题我是标题我是标题我是标题我是标题</div>
           <div class="value">
             <input />
           </div>
         </div>
       </td>
       <td>
         <div class="item">
           <div class="label">我是标题</div>
           <div class="value">
             <input />
           </div>
         </div>
       </td>
     </tr>
     <tr>
       <td>
         <div class="item">
           <div class="label">我是标题</div>
           <div class="value">
             <input />
           </div>
         </div>
       </td>
       <td>
         <div class="item">
           <div class="label">我是标题啊啊啊啊啊啊啊啊</div>
           <div class="value">
             <input />
           </div>
         </div>
       </td>
     </tr>
   </table>
 </div>

四、全部 html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .table-warp {
        height: 100%;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0px;
        table-layout: fixed;
        width: 300px;
        height: 100%;
      }
      tr > td,
      tr > th {
        border: 1px solid red;
        word-wrap: break-word;
        height: 100%;
      }
      .item {
        display: flex;
        height: 100%;
      }
      .label {
        display: flex;
        align-items: center;
        height: 100%;
        width: 60px;
        background-color: aqua;
        padding: 10px;
        box-sizing: border-box;
      }
      .value {
        display: flex;
        align-items: center;
        height: 100%;
        flex: 1;
        margin: auto;
      }
      input {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="table-warp">
      <table>
        <tr>
          <th>姓</th>
          <th>名</th>
        </tr>
        <tr>
          <td>
            <div class="item">
              <div class="label">我是标题我是标题我是标题我是标题我是标题</div>
              <div class="value">
                <input />
              </div>
            </div>
          </td>
          <td>
            <div class="item">
              <div class="label">我是标题</div>
              <div class="value">
                <input />
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="item">
              <div class="label">我是标题</div>
              <div class="value">
                <input />
              </div>
            </div>
          </td>
          <td>
            <div class="item">
              <div class="label">我是标题啊啊啊啊啊啊啊啊</div>
              <div class="value">
                <input />
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>