我需要创建一个 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？
谢谢。
最佳答案
我对您的需求有点困惑，但是您可以使用一组具有灵活子项的 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>关于javascript - 不使用 'table'创建动态html表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29889969/