table表格

w_t_y_y

已于 2022-05-19 16:44:38 修改

阅读量358

点赞数

分类专栏： # HTML+css 文章标签： html5

于 2021-04-23 16:47:22 首次发布

本文链接：https://blog.csdn.net/w_t_y_y/article/details/116062238

版权

HTML+css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了table的table-layout属性，包括fixed模式的列宽设置和auto模式的自适应行为。重点讲解了如何使两个表格对齐并处理高度限制。还探讨了默认情况下td的垂直居中问题及其取消方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、table的table-layout属性：

1、table-layout: fixed;表示平均分配。列数不定，宽度自动平均分配：

  table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      table-layout: fixed;
    }

如果需要固定某一列的宽度，如第一列：

table {
    margin: 0 auto;
    width: 95%;
    text-align: center;
    border-collapse: collapse;
    table-layout: fixed;
    tr,
    td {
      border: 1px solid rgba(22, 155, 213, 1);
      vertical-align: top;
      line-height: 40px;
    }
    td:nth-child(1) {
      width: 120px;
    }
  }

2、table-layout: auto自适应

二、两个表格拼接：table-layout: fixed;平均分配可以使两个表格对齐。如我上面一个表格，下面一个表格限制高度，超出加滚动条：

 <table>
          <tr class="tr-title">
            <td>排名</td>
            <td>部门/区域</td>
          </tr>
          <tr v-for="(item, index) in data1" :key="index">
            <td>{{ index+1 }}</td>
            <td>{{item.area}}</td>
          </tr>
        </table>
        <!--限高-->
        <div class="scroll-div">
          <table>
            <tr v-for="(item, index) in data2" :key="index">
              <td>{{ index+1 }}</td>
              <td>{{item.area}}</td>
            </tr>
          </table>
        </div>




 table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      table-layout: fixed;
      text-align: center;
      tr {
        border-bottom: 1px solid rgb(214, 211, 211);
        td {
          padding: 2px 0px;
          color: #f59a23;
          //overflow-x: auto;
          text-overflow: ellipsis; /* 加上，显示省略号*/
          white-space: nowrap;
          overflow: hidden;
        }
        td:hover {
          /* 鼠标滑过  显示隐藏的内容  伴有横向的滚动条 */
          overflow: auto;
          text-overflow: clip;
        }
      }
   }

 //限高
    .scroll-div {
      width: 100%;
      height: 500px;
      overflow-y: auto;

      //字体样式
      table {
        tr {
          td {
            font-family: '微软雅黑 Regular', '微软雅黑', sans-serif;
            color: #7f7f7f;
            // white-space: nowrap;
            // overflow-x: auto;
          }
        }
      }
    }

三、默认：

1、table中td默认垂直居中，取消方法：