シングル幅設定テーブル

参考：https://blog.csdn.net/lunhui1994_/article/details/81120579
効果：
HTML：
<！DOCTYPE HTML> 
<HTML> 
    <HEAD> 
        <メタ文字コード= "UTF-8"> 
        <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0、最大規模= 1.0、ユーザー-scalable = 0 "> 
        <タイトル>テスト</ TITLE> 
        <リンクのrel ="スタイルシート"のhref = "CSS / amazeui.css"> 
        ます。<script type = "text / javascriptの" SRC =" JS / jquery.min.js 「> </ SCRIPT> 
        <スタイル> 
            .table - アイテム{ 
                テーブル - レイアウト：固定; // TD的宽度固定、不随内容变化
            } 

            .table -items> TBODY> TR>TD {//テキストは省略記号超えて
                オーバーフロー：隠された; 
                ホワイト -スペース：NOWRAP。
                テキスト - オーバーフロー：省略記号。
            }
         </スタイル> 
    </ HEAD> 
    <BODY> 
        <DIV CLASS = "AM-CF"> 
            <テーブルクラス= "AM-の表は、午前・テーブルホバーテーブル・アイテム"> 
                <THEAD> 
                    <TR> 
                        <番目のスタイル= "幅：25％">序号</番目> 
                        <THスタイル= "幅：40％">姓</番目> 
                        <THスタイル= "幅：35％">名</番目> 
                    </ TR> 
                </ THEAD> 
                <TBODY ID = "テーブル体"> <
            VaRのデータリスト = [{ 
                ID： 1 、
                FIRST_NAME： 'honorificabilitudinitatibushonorificabilitudinitatibus' 、
                second_name： 'antidisestablishmentarianismantidisestablishmentarianism' 
            }、{ 
                ID： 2 、
                FIRST_NAME： 'floccinaucinihilipipificationfloccinaucinihilipipification' 、
                second_name： 'supercalifragilisticexpiadocioussupercalifragilisticexpiadocious' 
            }、{ 
                ID： 3 、
                FIRST_NAME。'hepaticocholecystostcholecystntenterostomyhepaticocholecystostcholecystntenterostomy' 、
                second_name： 'pneumonoultramicyoscpicailicovolcanoconiosispneumonoultramicyoscpicailicovolcanoconiosis' 
            }]。
            $（関数（）{
                 VARの STR = '' ;
                 のための（VAR i = 0; I <dataList.length; iは++ ）{ 
                    STR = "<TR> <TDタイトル=" +データリスト[I] .ID + ">" +データリスト[I] .ID + "</ TD>" +  
                        "<TDタイトル=" +データリスト[I] .first_name + ">" +データリスト[I] .first_name +「<
                        "<TDタイトル=" +データリスト[I] .second_name + ">" +データリスト[I] .second_name +「< 
                    $（ '＃テーブル本体' ）.append（STR）。
                } 
            }）
         </ SCRIPT> 
    </ body> 
</ HTML>
マウスがコンテンツの上に置いたときにtitle属性でTDが表示されます。
おすすめ
