响应式 Table - jQuery 调整大小错误

Question

想征求您的意见和帮助。

对于我的小框架，我希望在表格上固有地应用响应能力。这意味着没有类、ids 等

我正在使用 :before 和数据属性来移动 <thead>。这里的问题是当我的 :before 小于内容时。所以我做了一点 jQuery javascript 来让它和 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正在使用的。

这是正在解决的错误：

这是 window 的 500 像素宽度。先前 TD 的内容溢出其 TD 边界。我使用了 clear attribute，float attribute 等。对我没有任何作用。

这里是codepen.io整个情况：http://codepen.io/Ernedar/pen/dpYxwg

谁能帮我解决这个溢出问题？

使用绝对位置，类，ID 不允许我使用，因为我需要它来使其通用。

编辑：来自 Dekel 的尝试解决方案的图像精度：

Answer 1

删除了 td 的 height（不需要）。
向 table 添加了 position: absolute 和 top: 0（因为 flex 在此处造成了一些问题并将 table 定位在屏幕的中间 [垂直] ).
在 td 和 td:before 中添加了 margin/padding（一些负值）以解决定位问题。

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'); 

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

$(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>

还有一个 link 到固定代码笔：
http://codepen.io/anon/pen/BLmOym

响应式 Table - jQuery 调整大小错误

Responsive Table - jQuery resize bug

jquery

html

css

responsive

css-tables