我正在使用php填写表格并且有两个我可以点击的图片,它会显示两个不同的弹出框 - 每个弹出框也是一个表格,虽然我觉得不重要。
我需要将这些内部表保留在表中,以便从php填充正确的数据(关于我现在正在使用的表格行的详细信息或注释。)
我将弹出窗口显示为:none,然后在按钮单击后,我在jquery中使用.show()来显示弹出窗口。
我不喜欢的是在我的桌子排下面,当我显示弹出窗口时,我得到了一个我不想看到的非常小的额外行。弹出窗口位置:绝对正确。当我相对而言,额外的行是巨大的,所以更糟糕。
这是HTML一旦填充数据。我删除了第二个弹出窗口,因为它真的是一样的。
<div class="container">
<div class="row">
<div class="col-xs-12">
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
.....
</thead>
<tbody>
<tr>
<td>
<button class="notesExpanderButton"><img src='images/notes.jpg' title='notes' style="width:35px;height:25px;"></button>
<button class="detailsExpanderButton"><img src='images/details.png' title='details' style="width:35px;height:25px;"></button>
</td>
<td>Job 5</td>
<td>01/01/2015</td>
<td>Client Name</td>
</td>111 Somewhere Street</td>
.....
</tr>
<td class="detailsOuter">
<div class="detailsData" id=Job5>
<table class='table-borderless detailsTable'>
<thead>
<th colspan="4">Details: Job 5</th>
</thead>
<tbody>
.....
</tbody>
</table>
</div>
</td>
</tbody>
</table>
</div>
</div>
</div>
答案 0 :(得分:0)
表格格式错误。你现在有这个:
<table>
<tr>
<td>...</td>
</tr>
<td>...</td>
</table>
td
元素需要在 tr
元素内,而不是与它们并排。你想要的是这个:
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
更改服务器端代码以生成具有正确单元格位置的表格,并且奇怪的空白问题应该消失。您当然仍然需要继续更改样式,但至少如果标记有效,样式将更容易调试和调整。
注意:此元素的开头td
标记中也有拼写错误:
</td>111 Somewhere Street</td>
哪个标记无效。
虽然......如果此表格单元格中的唯一内容是&#34; popup&#34;,它本身在视觉上与表格分开,那么它可能不会首先属于表格单元格。它应该是表格之外的自己的元素。
通常&#34; popups&#34; (或&#34; modal divs&#34;)保存在标记末尾的某个集合中,设置为隐藏。