不使用“表”创建动态 html 表答案

【问题标题】：Creating dynamic html table without using 'table'不使用“表”创建动态 html 表
【发布时间】：2015-07-05 13:34:10
【问题描述】：

我需要在不使用表格标签或 css display:table(and same) 属性的情况下创建一个 html 表格。

我写了这段 html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Creating div tables</title>
    <link rel="stylesheet" type="text/css" href="flex.css">
    <script type="text/javascript" src="jquery-1.11.2.js"></script>
</head>
<body>
   <div class="tbl"></div>

   <script type="text/javascript">
        for (var i = 0; i < 5; i++) {
            $('.tbl').append('<div class="rw"></div>');
        };

        for (var i = 0; i < 8; i++) {
            $('.rw').append('<div class="col col'+i.toString()+'">'+Math.random().toString()+'</div>');
        };  
    </script> 
</body> 
</html>

还有这个css：

.tbl {
    background-color: yellow;
    display: flex;   
    flex-flow:column;
    position: relative;
    width: 80%;
    left: 10%;
}

.rw {
    background-color: rgb(197, 253, 255);
    display: flex;   
    flex-flow:row;
    resize:both;
}

.col {
    border-style: solid;
    border-color: black;
    overflow: hidden;
    display: inline-block;    
}

现在，我需要这样做，如果单元格中存在溢出，表格将根据下一个方案调整整个原始和/或列的大小。

此时只有原始大小调整有效。如何实现整列大小调整？我可以只使用 CSS 执行它吗？还是我必须使用 JavaScript/Jquery？

谢谢。

【问题讨论】：

你为什么要避开桌子？
也许可以查看与 display:flex 容器样式相关的 CSS 规则。

标签： javascript jquery html css flexbox

【解决方案1】：

我对你需要什么有点困惑，但你可以使用一组带有灵活子元素的 flexbox 容器来制作一个网格，以适应每个子单元格中的内容量：

body{ background-color: ivory; }
#container{width:400px;}
.Grid {
  display: flex;
}
.Grid-cell {
  flex: 1 1 auto;
  border:1px solid green;
}

    <div id='container'>
        <div class="Grid">
          <div class="Grid-cell">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</div>
          <div class="Grid-cell">A small bit of text.</div>
          <div class="Grid-cell">A small bit of text.</div>
        </div>
        <div class="Grid">
          <div class="Grid-cell">A small bit of text.</div>
          <div class="Grid-cell">A small bit of text.</div>
          <div class="Grid-cell">A small bit of text.</div>
        </div>
        <div class="Grid">
          <div class="Grid-cell">A small bit of text.</div>
          <div class="Grid-cell">A small bit of text.</div>
          <div class="Grid-cell">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</div>
        </div>
    </div>

【讨论】：