디자인 테이블

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>는 분류 기호 및 텍스트 상자에 긴 이름을 가지고 있다고 테이블을 설계 할 검색 기호 및 텍스트 상자를 정렬 긴 이름이 수색. 이 테이블에는 많은 컬럼이 있습니다.

정렬 기호와 함께 긴 내용이 하나의 행에 있고 그 아래의 텍스트 상자가 규칙적으로 그리고 균일하게 표에 어떻게 스타일링해야합니까? 큰 수의 기둥으로 인해이 표에는 수평 스크롤이 있습니다.

예 :

<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.