Question

我想在表格达到特定长度后将表格中的列包装到第二组列中。例如，我有一个带有字段名称和值的“单列”表：

<table cellpadding="0" cellspacing="0" border="1" >
    <tr height="50px">
        <td width="150">
            <strong>Field 1:</strong>
        </td>
        <td width="200">Data 1</td>
    </tr>
    <tr height="50px">
        <td width="150">
            <strong>Field 2:</strong>
        </td>
        <td width="200">Data 2</td>
    </tr>
    <tr height="50px">
        <td width="150">
            <strong>Field 3:</strong>
        </td>
        <td width="200">Data 3</td>
    </tr>
    <tr height="50px">
        <td width="150">
            <strong>Field 4:</strong>
        </td>
        <td width="200">Data 4</td>
    </tr>
    <tr height="50px">
        <td width="150">
            <strong>Field 5:</strong>
        </td>
        <td width="200">Data 5</td>
    </tr>
</table>

我想要最多三行，并将其包装成多列，如此（不像我在这里所做的那样更改底层HTML）：

<table cellpadding="0" cellspacing="0" border="1" >
    <tr height="50px">
        <td width="150">
            <strong>Field 1:</strong>
        </td>
        <td width="200">Data 1</td>
        <td width="150">
            <strong>Field 4:</strong>
        </td>
        <td width="200">Data 4</td>
    </tr>
    <tr height="50px">
        <td width="150">
            <strong>Field 2:</strong>
        </td>
        <td width="200">Data 2</td>
        <td width="150">
            <strong>Field 5:</strong>
        </td>
        <td width="200">Data 5</td>
    </tr>
    <tr height="50px">
        <td width="150">
            <strong>Field 3:</strong>
        </td>
        <td width="200">Data 3</td>
    </tr>
</table>

我的偏好是使用CSS作为我使用Javascript的能力，Javascript库仅限于我的项目。

Answer 1

如果您希望以不同的方式操作HTML而不是表格的流动，通常不会使用表格元素，但如果您不想更改HTML，您可以尝试这样的事情：< / p>

tr {
  width: 50%;
  float: left;
  height: auto;
}

您可以看到显示其外观的this fiddle。您需要某种类或某种东西来确定何时超过3行并在CSS中指定它。例如.greater3rows tr并在表格中将three3rows作为一个类。

基于最大行长度将“单列”表包装到多列中

1 个答案: