我想在表

时间:2016-05-25 16:23:30

标签: html

我正在使用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>  

1 个答案:

答案 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;)保存在标记末尾的某个集合中,设置为隐藏。