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="width:120px;">所屬電視台</th>

                <th class="table-author am-hide-sm-only" style="width: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="width: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：顯示省略符號來代表被修剪的文本。