table自适应及常用相关配置

table自适应及常用相关配置

这是一个常用的表格样式，故进行了整理归纳，后续遇到好的表格会进行分享；

代码贴在最后

实现效果，表头th标签定宽，后面内容实现宽度自适应，平均分配；

当内容超出时用省略号隐藏超出部分；

鼠标hover于内容上时换行显示内容（但应当注意行高和横向滚动条）

table-layout: fixed;

table-layout: fixed;
/*该项配置是表格内容的宽度分配方案,默认 automatic 由内容决定宽度比率，
fixed 项可使宽度由配置宽度决定 */

border-collapse: collapse;

border-collapse: collapse;
/*表格边框内容，合并行列之间的宽度，使表格更美观*/

表格内容合并

 <th colspan="2">横向合并</th>
 <th rowspan="2">纵向合并</th>

配置代码如下

为了提高阅读体验代码进行了精简

<table>
          <tr>
            <th>注册单位</th>
            <td>数据管理中心</td>
            <th>接口名称</th>
            <td>数据中心111111111111111111111111111111</td>
          </tr>
          <tr class="end-tr">
            <th>注册单位</th>
            <td colspan="3">数据管理中心</td>
          </tr>
</table>

    table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      tr {
        font-family: PingFangSC-Medium;
        font-size: 14px;
        height: 40px;
        th {
          width: 160px;
          white-space: nowrap;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          background-color: rgba(242, 246, 252, 1);
        }
        td {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: left;
          padding: 0 20px;
        }
        td:hover {
          overflow: auto;
          text-overflow: clip;
          white-space: normal;
        }
      }
    }
    table, td, th {
      border: 1px solid #ddd;
    }
    .end-tr {
      height: 72px;
    }
    th {
      border: 1px solid #ddd;
    }
    .end-tr {
      height: 72px;
    }