zoukankan      html  css  js  c++  java
  • table单元格内容过多换行显示

    <table class="am-table am-table-striped am-table-hover table-main am-table-compact " style="table-layout: fixed;">

                  <thead>

                  <tr>

                  <th class="table-check"><input type="checkbox" id="checkall"/></th> 

                    <th class="table-author am-show-sm-only">节目名称</th>

                     <th class="table-author am-show-sm-only"style="120px;">所属电视台</th>

                    <th class="table-author am-hide-sm-only" style="50px;">版本</th>

                    <th class="table-author am-hide-sm-only">开始时间</th>

                    <th class="table-author am-hide-sm-only">结束时间</th>

                    <th class="table-date am-hide-sm-only">获取时间</th>

                    <th class="table-set" style="140px;">操作</th>

                  </tr>

                  </thead>

                  <tbody>

                  [#if list][#list list.items as t]

                  <tr>

    <td><input type="checkbox" class="checkone"/><input type="hidden" value="${t._id}"></td> 

                  <td style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" class="logcontent" >${t.program}</td>

                  <td >${t.channelName}</td>

                   <td >${t.__v}</td>

          <td style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" class="logcontent">${t.beginTime?string("yyyy年MM月dd日HH时mm分ss秒")}</td>

                <td style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" class="logcontent">${t.endTime?string("yyyy年MM月dd日HH时mm分ss秒")}</td>

                   <td style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" class="logcontent">${t.addTime?string("yyyy年MM月dd日HH时mm分ss秒")}</td>

                    <td>

                      <div class="am-btn-toolbar">

                        <div class="am-btn-group am-btn-group-xs">

                          <button class="am-btn am-btn-default am-btn-xs am-text-secondary"  onclick="location='/TVPrograms/addOne.do?_id=${t._id}&userName=${datamanager.username}&forwardUrl=${forwardUrl}'" ><span class="am-icon-pencil-square-o"></span> 编辑</button>

                          <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"   onclick="check('${t._id}','${datamanager.username}')"><span class="am-icon-trash-o"></span> 删除</button>

                        </div>

                      </div>

                    </td>

                  </tr>

                  [/#list]

                  [/#if]

                  </tbody>

                </table>

    js代码:

    //logcontent内容过长

    $(".logcontent").each(function(){

    $(this).click(function(){

    var a = $(this).css("white-space");

    if(a=="nowrap"){

    $(this).css("white-space","normal");

    }else{

    $(this).css("white-space","nowrap");

    }

    })

    })

    style="table-layout: fixed;":设置表格大小固定 (列宽由表格宽度和列宽度设定)。

    style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"

       overflow溢出内容会被修剪,并且其余内容是不可见的。

       white-space:规定段落中的文本不进行换行

       text-overflow:显示省略符号来代表被修剪的文本。

  • 相关阅读:
    mvc razor中renderPartial,RenderAction,Partial,Action的使用选择
    jquery最常用的几个方法。——可删除
    配置文件参数引用
    tinkphp5.0目录结构说明
    ionic ios上状态栏和app重叠解决方案
    cordova-plugin-alipay-v2使用篇(更新至20170725)(亲测可用)
    Ionic2 App Import BrowserAnimationsModule or NoopAnimationsModule问题
    ionic3.0 中带顶部导航的下拉刷新列表的实现
    npm install 时 提示err code EINTEGRITY报错
    ionic3.0 alipay-base插件移除后会添加多余的链接文件在nodes-modules中,导致再安装其他插件或移除插件时报错问题
  • 原文地址:https://www.cnblogs.com/lixiuming521125/p/6793085.html
Copyright © 2011-2022 走看看