添加时在两列中显示两个 table

Question

我正在使用 DropzoneJS，我想自定义模板。

我的模板如下：

<div id="previewTemplate" style="display:none;">
    <table class="dz-preview">
        <tr>
            <td class="col-md-10">
                 <a href="#" class="dz-filename" data-dz-name=""></a>
            </td>
            <td class="col-md-2">
            X
            </td>
        </tr>
    </table>
</div>

在dropzone.js中，我添加了一段代码如下：

previewTemplate: $('#previewTemplate').html()

因此，它正在获取“#previewTemplate”的内部 HTML。

我在一行中得到所有 table。

现在，我只想连续两个 table。也就是说，在每一行中我想要两列。

我怎样才能做到这一点？

Answer 1

好吧，当我想将 table 放入 table 时，我会在 td 标签内指定一个 td 标签或 th 标签，然后我将放入两个 div 标记充当 2 table 的容器并更改它们的 css 属性以显示 "inline-block" 或 "table-td" 然后我将插入 table s 在里面，像这样：

CSS

    .table_inner_1 {
    display: inline-block;
    }
    .table_inner_2 {
    margin-left: 10px;
    display: inline-block;
    }

/*this below is just to target both td's of both of the inner tables*/

    .table_inner_1 table tr td:not(:first-child), .table_inner_2 table  tr td:not(:first-child) 
    {
    padding-left: 5px;
    }

HTML

<table>
<tr>
<td>
<td>
<div class="table_inner_1"><table><tr><td>dummy text</td><td>dummy text</td></tr>
</table></div><div class="table_inner_2"><table><tr><td>dummy text</td><td>dummy text</td></tr></table></div>
</td>
</td>
</tr>
</table>

这可以将 table 放入 table 中，如果这是您想要的。

添加时在两列中显示两个 table

Display two table in two columns in a row on adding

html

javascript

css

jquery

dropzone.js