码迷,mamicode.com
首页 > 其他好文 > 详细

table标签自适应及常用相关配置

时间:2020-03-16 19:02:31      阅读:61      评论:0      收藏:0      [点我收藏+]

标签:注册   数据   体验   默认   table   之间   分配   png   clip   

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;
    }

table标签自适应及常用相关配置

标签:注册   数据   体验   默认   table   之间   分配   png   clip   

原文地址:https://www.cnblogs.com/baiyang2292/p/12505794.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!