表格与div对齐

时间:2013-10-30 06:09:07

标签: javascript css html-table

我们使用JS Render在JavaScript中实现了新的Grid,同时使用以下代码片段。

我们遇到了一些问题。

代码段:

<div class="gridcontent" style="height:356px;overflow:scroll">
        <div class="gridcontainer" style="height:2000px">
            <table>
            <colgroup></colgroup>
                <tbody>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="" style="float: left;"></div><div></div><div>Task 80</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">92</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 81</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">74</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 82</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">32</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 83</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">96</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 84</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">58</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 85</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">51</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 86</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">38</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 87</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">95</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 88</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">9</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 89</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">76</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 90</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">87</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 91</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">53</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 92</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">34</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 93</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">80</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 94</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">58</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 95</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">50</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 96</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">59</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 97</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">13</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 98</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">85</td></tr>
                    <tr><td class="rowcell"><div style="float: left;"><div class="intend" style="width: 30px; height: 1px; float: left;"></div><div class="+" style="float: left;"></div><div></div><div>Task 99</div></div></td><td class="rowcell">01/01/2009</td><td class="rowcell">01/05/2009</td><td class="rowcell">5 days</td><td class="rowcell">96</td></tr>
                </tbody>
                </table>
        </div>
    </div>

在这种情况下,我将总数据对象设置为100,同时,我只想加载视图中存在的数据对象。在这种情况下,我的要求是表格将显示底部位置gridcontainer div。有没有其他方法可以实现这一点,如应用保证金,表格中的任何其他对齐方式。

0 个答案:

没有答案