2016-09-19 3 views
3

Я хотел бы попросить вас узнать ваше мнение и помочь.Отзывчивый стол - ошибка изменения размера jQuery

Для моей маленькой структуры я бы хотел, чтобы на практике применялась отзывчивость на таблицах. Это означает, что нет классов, идентификаторов и т. Д.

Я использую: раньше с атрибутом data для перемещения <thead>. Проблема здесь в том, когда у меня меньше: до содержимого. Поэтому я сделал jQuery jQuery, чтобы сделать его той же высотой, что и TD.

function WindowResize(returnWidth) { 
    var Width = 0; 
    var Height = 0; 
    // IE Handler 

    if (!window.innerWidth) { 
     if (!(document.documentElement.clientWidth == 0)) { 
      // Strict Mode 

      w = document.documentElement.clientWidth; 

      h = document.documentElement.clientHeight; 
     } else { 
      // Quirks Mode 

      w = document.body.clientWidth; 

      h = document.body.clientHeight; 
     } 
    } else { 
     //w3c 

     w = window.innerWidth; 

     h = window.innerHeight; 
    } 

    return (returnWidth) ? w : h; 
} 

function setSameTDHeight(Width) { 
    Width = parseInt(Width); 

    //var TDList = document.getElementByTagName('TD'); 

    if (Width < 768) { 

     $("td").each(
      function() { 
       var TDHeight = $(this).innerHeight(); 
       $(this).before().css({'height': TDHeight}); 
      }   
     ); 
    } 
} 

$(window).resize(
    function() { 
     setSameTDHeight(WindowResize(true)); 
    } 
); 

$(document).ready(
    function() { 
     setSameTDHeight(WindowResize(true)); 
    } 
); 

Здесь используется jQuery.

А вот решение ошибка утра:

overflow content bug

Это на 500px ширины окна. Содержимое предыдущего TD переполняет границу TD. Я использовал атрибут clear, float и т. Д. Ничего не работало для меня.

Вот codepen.io всей ситуации: http://codepen.io/Ernedar/pen/dpYxwg

Может кто-нибудь помочь мне решить это переполнение?

Использование абсолютного положения, классы, идентификаторы не разрешены для использования, так как мне это нужно, чтобы сделать его универсальным.

EDIT: точность изображения из попытался решения от Dekel: enter image description here

+0

вы фиксированная высоту, так что добавьте ** "переполнение-у: авто;" ** для предотвращения это – Byron

+0

и другая опция - удалить строку ** $ (this) .before(). css ({'height': TDHeight}); ** – Byron

+0

@Ernedar, вы проверили ответ? Было ли это правильно или у вас все еще есть проблемы? – Dekel

ответ

2
  1. Удалены height в тд (не требуется).
  2. Добавлены position: absolute и top: 0 к таблице (так как изгиб вызвал некоторые проблемы здесь и расположил таблицу посередине [по вертикали] экрана).
  3. Добавлена ​​маржа/заполнение (некоторые с отрицательными значениями) к td и td:before для устранения проблем с позиционированием.

function WindowResize(returnWidth) { 
 
    var Width = 0; 
 
    var Height = 0; 
 
    // IE Handler 
 

 
    if (!window.innerWidth) { 
 
    if (!(document.documentElement.clientWidth == 0)) { 
 
     // Strict Mode 
 

 
     w = document.documentElement.clientWidth; 
 

 
     h = document.documentElement.clientHeight; 
 
    } else { 
 
     // Quirks Mode 
 

 
     w = document.body.clientWidth; 
 

 
     h = document.body.clientHeight; 
 
    } 
 
    } else { 
 
    //w3c 
 

 
    w = window.innerWidth; 
 

 
    h = window.innerHeight; 
 
    } 
 

 
    return (returnWidth) ? w : h; \t 
 
} 
 

 
function setSameTDHeight(Width) { 
 
    Width = parseInt(Width); 
 

 
    //var TDList = document.getElementByTagName('TD'); 
 

 
    $("td").each(
 
    function() { 
 
     // we don't really need this: 
 
     
 
     //var TDHeight = $(this).innerHeight(); 
 
     //$(this).before().css({'height': TDHeight}); 
 
    } \t \t \t 
 
); 
 
} 
 

 
$(window).resize(
 
    function() { 
 
    setSameTDHeight(WindowResize(true)); 
 
    } 
 
); 
 

 
$(document).ready(
 
    function() { 
 
    setSameTDHeight(WindowResize(true)); 
 
    } 
 
);
body { 
 
    font-family: "Open Sans", sans-serif; 
 
} 
 

 
div { 
 
    width: 100%; 
 
    height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
table { 
 
    width: 100%; 
 
    max-width: 100%; 
 
} 
 

 
tbody tr:nth-of-type(odd) { 
 
    background-color: #EEEEEE; 
 
} 
 
tbody td { 
 
    font-size: 12px; 
 
} 
 

 
thead th { 
 
    font-weight: 700; 
 
    font-size: 14px; 
 
} 
 

 
td, th { 
 
    padding: 5px; 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
    table { 
 
    position: absolute; 
 
    top: 0; 
 
    } 
 

 
    table, thead, tbody, tr, td, th { 
 
    display: block; 
 
    } 
 

 
    thead { 
 
    width: 0; 
 
    height: 0; 
 
    } 
 
    thead th { 
 
    font-size: 0; 
 
    color: transparent; 
 
    } 
 

 
    table tr { 
 
    display: block; 
 
    } 
 
    table tr:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
    } 
 
    table tr:before { 
 
    display: block; 
 
    } 
 

 
    table td { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    clear: both; 
 
    display: block; 
 
    padding-left: 40%; 
 
    } 
 
    table td:before { 
 
    content: attr(data-title); 
 
    border: 1px solid green; 
 
    width: 60%; 
 
    float: left; 
 
    min-height: 100%; 
 
    margin-left: -65%; 
 
    } 
 
    table td:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
    } 
 
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&subset=latin-ext" rel="stylesheet"> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
<div> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</th> 
 
     <th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</th> 
 
     <th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</th> 
 
     <th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</th> 
 
     <th>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td data-title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</td> 
 
     <td data-title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</td> 
 
     <td data-title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</td> 
 
     <td data-title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</td> 
 
     <td data-title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</td> 
 
     </tr> 
 
     <tr> 
 
     <td data-title="Jméno">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In enim a arcu imperdiet malesuada. Fusce consectetuer risus a nunc. Integer lacinia. In enim a arcu imperdiet malesuada.</td> 
 
     <td data-title="Příjmení">Maximov</td> 
 
     <td data-title="Věková šarže">25</td> 
 
     <td data-title="Zaměření">Pilot</td> 
 
     <td data-title="Životní situace">Employed</td> 
 
     </tr> 
 
     <tr> 
 
     <td data-title="Jméno">Evelyn</td> 
 
     <td data-title="Příjmení">Headrow</td> 
 
     <td data-title="Věková šarže">19</td> 
 
     <td data-title="Zaměření">Student</td> 
 
     <td data-title="Životní situace">Not Employed</td> 
 
     </tr> 
 
     <tr> 
 
     <td data-title="Jméno">Bernard</td> 
 
     <td data-title="Příjmení">Milhouf</td> 
 
     <td data-title="Věková šarže">37</td> 
 
     <td data-title="Zaměření">Teacher</td> 
 
     <td data-title="Životní situace">Employed</td> 
 
     </tr> 
 
     <tr> 
 
     <td data-title="Jméno">Angelika</td> 
 
     <td data-title="Příjmení">deVille</td> 
 
     <td data-title="Věková šarže">68</td> 
 
     <td data-title="Zaměření">Designer</td> 
 
     <td data-title="Životní situace">Retired</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

И ссылка на фиксированных codepen:
http://codepen.io/anon/pen/BLmOym

+0

Позвольте мне проверить и попробовать, и если это сработает, щедрость ваша. Большое спасибо. – Ernedar

+0

EDIT: Пробовал, это, к сожалению, не решает проблему. Он не переполнен с левой стороны, правда, но все же он переполняется из нижней части в другую ячейку таблицы. Спасибо за вклад, но проблема еще не решена. – Ernedar

+0

Какой браузер вы проверили? И я не уверен, что понимаю, что вы подразумеваете под «переполнением из нижней части в другую ячейку таблицы». Можете ли вы предоставить скриншот? – Dekel