当我运行此代码时,数据从我正在拉出的表格中正确地输入到表格单元格中,但是表格重叠,因此它们在表格下方显示表格,它们也向左移动对。我还包含了我的CSS代码,我尝试在循环开始后在它周围添加一个div包装器,以便它可以放在每个itteration的包装器中,但这还没有解决问题。
<% if @form.valid? %>
<div id="display">
<% if @form.items.any? %>
<% @form.items.each do |w| %>
<% if !w.hours.any? %>
Error Message
<% else %>
<% w.hours.each do |l| %>
<div id="form">
<table class="tg">
<tr>
<th class="tg-title" colspan="4">SECTION A – Information</th>
</tr>
<tr>
<td class="tg-subtitle" colspan="4">Complete:</td>
</tr>
<tr>
<td class="tg-celltitle" colspan="2">list: </td>
<td class="tg-datacell" colspan="2"><%= l.list.list_name %></td>
</tr>
<tr>
<td class="tg-celltitle" colspan="2">sublist name:</td>
<td class="tg-datacell" colspan="2">Blank</td>
</tr>
<tr>
<td class="tg-celltitle">number:</td>
<td class="tg-datacell"><%= l.b_line_item.b_line_item %></td>
<td class="tg-celltitle">Paragraph number:</td>
<td class="tg-datacell"></td>
</tr>
<tr>
<td class="tg-celltitle">Main number:</td>
<td class="tg-datacell">Left in for now</td>
<td class="tg-celltitle">Identifier:</td>
<td class="tg-datacell"><%= l.identifier.identifier %></td>
</tr>
<tr>
<td class="tg-celltitle">Start & end dates:</td>
<td class="tg-datacell"><%= l.description %></td>
<td class="tg-celltitle">Basic or option :</td>
<td class="tg-datacell"><%= l.year.year %></td>
</tr>
<tr>
<td class="tg-multirow" rowspan="4">category</td>
<td class="tg-datacell"><%= l.category.category %></td>
<td class="tg-celltitle" rowspan="4">Effort:</td>
<td class="tg-datacell"></td>
</tr>
<tr>
<td class="tg-datacell">e</td>
<td class="tg-datacell"></td>
</tr>
<tr>
<td class="tg-datacell">b</td>
<td class="tg-datacell"></td>
</tr>
<tr>
<td class="tg-datacell">c</td>
<td class="tg-datacell"></td>
</tr>
<tr>
<td class="tg-celltitle" colspan="4">Narrative description:</td>
</tr>
<tr>
<td class="tg-datacell" colspan="4"><%= l.item.description %></td>
</tr>
<tr>
<td class="tg-celltitle" colspan="4"></td>
</tr>
<tr>
<td class="tg-datacell" colspan="4"></td>
</tr>
<tr>
<td class="tg-celltitle" colspan="4"></td>
</tr>
<tr>
<td class="tg-datacell" colspan="4"></td>
</tr>
<tr>
<td class="tg-celltitle" colspan="4"></td>
</tr>
<tr>
<td class="tg-datacell" colspan="4"></td>
</tr>
<tr>
<td class="tg-title" colspan="4">Section C – Estimating</td>
</tr>
<tr>
<td class="tg-subtitle" colspan="4"></td>
</tr>
<tr>
<td class="tg-celltitle" colspan="4"></td>
</tr>
<tr>
<td class="tg-datacell" colspan="4"></td>
</tr>
<tr>
<td class="tg-celltitle" colspan="4"></td>
</tr>
<tr>
<td class="tg-datacell" colspan="4"></td>
</tr>
<tr>
<td class="tg-celltitle" colspan="4"></td>
</tr>
<tr>
<td class="tg-datacell" colspan="4"></td>
</tr>
<tr>
<td class="tg-celltitle" colspan="4"></td>
</tr>
<tr>
<td class="tg-datacell" colspan="4"></td>
</tr>
<tr>
<td class="tg-celltitle" colspan="4"></td>
</tr>
<tr>
<td class="tg-datacell" colspan="4"></td>
</tr>
<tr>
<td class="tg-celltitle" colspan="4"></td>
</tr>
<tr>
<td class="tg-datacell" colspan="4"></td>
</tr>
</table>
</div>
<% end %>
</div>
<% end %>
<% end %>
<% end %>
<% end %>
CSS:
div#form{
padding: 10px;
align: center;
}
.tg {
border-collapse:collapse;
border-spacing:0;
}
.tg td{
font-family:Arial, sans-serif;
font-size:14px;
color: #000;
padding:10px 5px;
overflow:hidden;
word-break:normal;
border: black;
border-style: solid;
border-width: 1px;
}
.tg th{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
color: #000;
padding:10px 5px;
overflow:hidden;
word-break:normal;
border: black;
border-style: solid;
border-width: 1px;
}
.tg .tg-multirow{
background-color:#c0c0c0;
text-align:center;
}
.tg .tg-subtitle{
background-color:#ffffc7
}
.tg .tg-title{
font-weight:bold;
font-size:16px;
background-color:#bbdaff;
text-align:center;
}
.tg .tg-celltitle{
background-color:#c0c0c0
}
.tg .tg-datacell{
text-align: center;
}
h1 {
display: inline-block;
padding: 0px,15px,0px,0px;
min-width: 80px;
font-size: large;
color:#003366;
font-weight: bold;
}
答案 0 :(得分:0)
我不确定我是否正确理解了您的问题,但是在模板中间您有2个成员行而没有设置colspans。这部分:
<tr>
<td class="tg-datacell">e</td>
<td class="tg-datacell"></td>
</tr>
<tr>
<td class="tg-datacell">b</td>
<td class="tg-datacell"></td>
</tr>
<tr>
<td class="tg-datacell">c</td>
<td class="tg-datacell"></td>
</tr>
编辑:还有一件事是将
放入空的tds中。空tds可以崩溃