Question

我有一个表，用户将数据输入到列中。每次用户输入数据时，都会创建一个新列。过了一会儿，他们有一些TON的列，我需要它们来包装。

我知道如何将文本包装在列中，但我需要将整个列包装在第一列下面，依此类推。

Answer 1

你不应该为此使用表格。你应该使用带有“float：left”CSS样式的div。

以下是一个工作示例：http://jsfiddle.net/3MEJ5/

Answer 2

实际上并不简单。表/行/列结构非常严格。为了实现您所描述的内容，您必须将每个单元格创建为巨大外部单元格中的单细胞表格。然后他们会换行。但是，他们可能不会很好地对齐。

Answer 3

不要使用表列，而是尝试让每个输入数据自己成为一个表，使用以下CSS包装在<div class="datainput">内：

.datainput {display: inline-block; vertical-align: top;}

现在，不是添加新列，而是复制容器。这将把它放在现有的旁边，并在需要时包装。

如果无法换行，请将此CSS应用于包含所有这些容器的元素：

word-break: break-all;

Answer 4

为此，一个好的解决方案是使用CSS3列。

您可以在容器上设置CSS属性，子代将顺流而下。

您可以选择：

div {
  /* Make columns with a min width of 100px, create multiple columns as space permits */
  column-width: 100px;
  column-count: 3; /* Divide the text in a <div> element into three columns */
  column-gap: 40px;  /* Specify a 40 pixels gap between the columns */
  /* Specify the width, style, and color of the rule between columns */
  column-rule: 4px double #ff00ff;
}

有关更多详细信息，请参见：https://www.w3schools.com/cssref/css3_pr_columns.asp

有关浏览器的支持，请参见：https://caniuse.com/#search=css3%20columns

HTML表包裹列

4 个答案: