Question

我需要创建一个html表而不使用table标签或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;    
}

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

Scheme of cells resizing

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

感谢。

Answer 1

我对您的需求感到有些困惑，但您可以使用一组具有灵活子项的flexbox容器来制作一个网格，以适应每个子单元格中的内容量：

enter image description here

＆＃13;

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

＆＃13;

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

＆＃13;

创建动态html表而不使用＆＃39;表＆＃39;

1 个答案: