响应式表格 - jQuery调整大小错误

Question

我希望询问您的意见和帮助。

在我的小框架中，我希望表格具有自适应性，而不需要类、id等。

我使用了带有数据属性的 :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。

以下是我要解决的问题：

当窗口宽度为500px时，前一个 TD 的内容溢出其 TD 边框。我尝试使用 clear 属性、float 属性等方法，但都没有起作用。

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

有人能帮我解决这个溢出问题吗？

由于需要使其通用，因此不允许使用绝对定位、类、ID等。

编辑：从 Dekel 的尝试解决方案中提取的图像：

- Ernedar

---

你的高度是固定的，因此请添加 "overflow-y: auto;" 以防止溢出。 - Byron

另一个选项是删除行 **$(this).before().css({'height': TDHeight});**。 - Byron

@Ernedar，你检查了答案吗？是正确的还是你在这里仍然有问题？ - Dekel

Answer 1

1. 移除了 td 的 height 属性（不需要）。
2. 为表格添加了 position: absolute 和 top: 0 属性（由于 flex 导致表格在屏幕中间 [垂直方向] 定位出现问题）。
3. 为 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>

这是一个指向已修复的CodePen代码的链接：
http://codepen.io/anon/pen/BLmOym

- Dekel

---

让我检查一下并尝试一下，如果有效，赏金就是你的。非常感谢。 - Ernedar

编辑：尝试过了，但仍然无法解决问题。确实没有从左侧溢出，但仍会从底部溢出到另一个表格单元格中。感谢您的贡献，但问题尚未解决。 - Ernedar

你用哪个浏览器查看的？我不太确定你所说的“从底部溢出到另一个表格单元格”的意思。你能提供一张截图吗？ - Dekel

这是我从我的答案中的CodePen获得的（Chrome）：http://i.stack.imgur.com/XLfGC.png - Dekel

我看到IE/Firefox中有一些故障 - 我也会尝试解决这个问题。 - Dekel