Таблицы столбцов Ширины столбцов Не изменяйте размер

Я пытался несколько часов пытаться получить значение dataTable, основанное на процентах по ширине. Несмотря на то, что таблица содержится внутри другого div с шириной на основе%, строки таблицы всегда превышают размер их контейнера. Я бы хотел, чтобы длинные строки переходили на следующую строку, а не расширяли их ширину.Таблицы столбцов Ширины столбцов Не изменяйте размер

Мой HTML со встроенным JavaScript:

<html><head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
    <script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script> 
    <style src="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css"></style> 
    <script type='text/javascript'> 
    $(document).ready(function() { 
     table = $('#vol_table').dataTable({ 
     "sWidth" : "100%", 
     "aoColumns" : [ 
      { sWidth: '20%' }, 
      { sWidth: '80%' } 
     ] 
     }); 

     $('#vol_table tbody').on('click', 'tr', function() { 
      if ($(this).hasClass('selected')) { 
       $(this).removeClass('selected'); 
      } 
      else { 
       table.$('tr.selected').removeClass('selected'); 
       $(this).addClass('selected'); 
      } 
     }); 

    }); 
    </script> 

    <style> 
     #xouter3{ 
     width:80%; 
     border:1px solid #000; 
     float:left; 
     margin:15px 0 15px 9%; 
     } 

     #xleftcol3{ 
     float: left; 
     width: 15%; 
     background:#eff2df; 
     } 

     #xmiddlecol3 { 
     overflow:hidden; 
     } 
     * html #xmiddlecol3{float:left;} 
     * html #xmiddlecol3 #xinner3{width:100%;} 

     #col2text { 
      white-space:pre-wrap; 
      height:500px; 
      overflow:scroll; 
      font-size:0.8em; 
     } 

     table, th, td { 
      border: 1px solid black; 
      border-collapse: collapse; 
     } 

     #xrightcol3 { 
     float:right; 
     width: 15%; 
     position:relative; 
     } 

     .selected td { 
      background-color: aqua !important; /* Add !important to make sure override datables base styles */ 
     } 

    </style> 
</head> 
    <body> 
     <h1 id="title">DataTables Problem</h1> 
     <div id="xouter3"> 
      <div id="xleftcol3"> 
       <div id="col1text"> 
        This is the column 1 text 
       </div> 
      </div> 
      <div id="xrightcol3"> 
       <table id="vol_table" style="width:100%"> 
        <thead> 
         <tr> 
          <th>Vol</th> 
          <th>Description</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td>1</td><td>This is an awfully long row isn't it</td> 
         </tr> 
         <tr> 
          <td>2</td><td>AnotherLongRowWithoutWhiteSpaces</td> 
         </tr>            
        </tbody> 
       </table> 
      </div> 
      <div id="xmiddlecol3"> 
       <div id="xinner3"> 
        <div id="col2text"> 
         This is the column 2 text 
        </div> 
       </div> 
      </div> 
     </div> 

    </body> 
</html>

источник

2015-03-17 GrantD71

, то вам необходимо установить фиксированный с (в РХ) – Aru

вы можете сделать это, как ниже

"columnDefs": [ 
    { 
     targets: 2, 
     className: 'dt-body-left', 
     width: '200px' 
    }

источник

2015-03-17 06:15:14 Aru

Так не возможно иметь столбцы составляют% ширины содержащего div? – GrantD71

Надеюсь, да, иначе вы можете попробовать добавить обертку в таблицу с фиксированной шириной (px) и попробовать! – Aru

Таблицы столбцов Ширины столбцов Не изменяйте размер

ответ

Смежные вопросы