创建动态HTML表格而不使用“表格”

Question

我需要创建一个HTML表，而不使用表标签或CSS display：table（和同一个属性）。

我写了这个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？

谢谢。

Answer 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>

创建动态HTML表格而不使用“表格”

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-04-27 17:46:00

创建动态HTML表格而不使用“表格”

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-04-27 17:46:00

解决方案1
3 已采纳 2015-04-27 17:46:00