デザインテーブルは

Question

<script> 
 
    $(document).ready(function() { 
 

 
    $("#table_filter_simab_btn").click(function() { 
 
     $("#table_filter_simab_btn").fadeOut(1); 
 
     $(".searching_input_simab").fadeIn(3000); 
 
     $("#table_filter_simab_btn_cancel").fadeIn(3000); 
 
     $("#table_filter_simab_btn_check").fadeIn(3000); 
 
    }) 
 
    $("#table_filter_simab_btn_cancel").click(function() { 
 
     $(".searching_input_simab").fadeOut(1); 
 
     $("#table_filter_simab_btn_cancel").fadeOut(1); 
 
     $("#table_filter_simab_btn_check").fadeOut(1); 
 
     $("#table_filter_simab_btn").fadeIn(2000); 
 
    }) 
 
    }); 
 

 
< 
 
/script>

<style>#searching_div_simab #searching_table_simab #searching_thead_simab #searching_tr_simab .searching_input_simab { 
 
    display: none; 
 
} 
 

 
#searching_div_simab #searching_table_simab #searching_thead_simab #searching_tr_simab #table_filter_simab_btn_cancel { 
 
    display: none; 
 
} 
 

 
#searching_div_simab #searching_table_simab #searching_thead_simab #searching_tr_simab #table_filter_simab_btn_check { 
 
    display: none; 
 
} 
 

 
#searching_div_simab #searching_table_simab #searching_thead_simab #searching_tr_simab .fit { 
 
    white-space: pre; 
 
    width: 1%; 
 
} 
 

 
#searching_div_simab #searching_table_simab #records_table tr td { 
 
    white-space: pre; 
 
    width: 1%; 
 
} 
 

 
</style>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="panel-content" id="searching_div_simab"> 
 
    <table class="table table-hover dataTable table-bordered" id="searching_table_simab"> 
 
    <thead id="searching_thead_simab"> 
 
     <tr id="searching_tr_simab" role="row"> 
 
     <th class="fit" rowspan="1" colspan="1"> 
 
      action <br /> 
 
      <button id="table_filter_simab_btn" class="btn btn-sm btn-blue" style="width:40px;"><i class="fa fa-filter"></i> filter </button> 
 
      <button id="table_filter_simab_btn_check" class="btn btn-sm btn-success" style="width:40px;"><i class="fa fa-check"></i> submit </button> 
 
      <button id="table_filter_simab_btn_cancel" type="button" class="btn btn-sm btn-danger" style="width:40px;"><i class="fa fa-close"></i> cancel </button> 
 
     </th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column <input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column <input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column <input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1"> Title of the column <input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1"> Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column <input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column <input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column <input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column <input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column <input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column <input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     <th class="sorting fit" rowspan="1" colspan="1">Title of the column<input class="form-control searching_input_simab" placeholder="Search..." type="text"></th> 
 
     </tr> 
 
    </thead> 
 
    <tbody id="records_table"> 
 
     <tr> 
 
     <td class="text-right"> 
 
      <table> 
 
      <tr> 
 
       <td><button type="button" title="delete" style="width:32px;" class="btn btn-sm btn-danger" data-toggle="modal" data-target=".modal" data-paragraphs="10"><i class="fa fa-close"></i></button></td> 
 
       <td><button type="button" title="edit" style="width:32px;" class="btn btn-sm btn-primary" data-toggle="modal" data-target=".modal" data-paragraphs="10"><i class="fa fa-edit"></i></button></td> 
 
       <td><button type="button" title="info" style="width:32px;" class="btn btn-sm btn-dark" data-toggle="modal" data-target=".modal" data-paragraphs="10"><i class="fa fa-info"></i></button></td> 
 
       <td><button type="button" title="price" style="width:32px;" class="btn btn-sm btn-default" data-toggle="modal" data-target=".modal" data-paragraphs="10"><i class="fa fa-shopping-cart"></i></button></td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     <td>super Admin</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

が、私はそれが<th>がソート記号とテキストボックスのために長い名前を持っているということ、テーブルをデザインしたい検索のための記号とテキストボックスを並べ替えて、長い名前を持っていますサーチ。この表には多くの列があります。

ロングコンテンツと並べ替え記号が1行とテキストボックスの下に規則的かつ一様に配置されるように、テーブルのスタイルを設定する必要はありますか？列数が多いため、この表には水平スクロールがあります。

例：

<th class="sorting" rowspan="1" colspan="1">Title of the program<input class="form-control searching_input_asd" placeholder="Search" type="text"></th> 

Answer 1

私が見上げるとダウン、この問題をaolveすることができるというのすべての異なる様々な方法を試してみました、そして、私は解決策を見つけます。 CSSのtext-overflowプロパティを使用すると、複数の行に長いタイトルを書き込まないようにすることができます。

使用このスタイル：

th.fit { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

詳細については、このLinkをチェックしてください。