何用电话调用修复混乱页面?

时间:2015-07-24 20:52:47

标签: html css ruby-on-rails

当我运行此代码时,数据从我正在拉出的表格中正确地输入到表格单元格中,但是表格重叠,因此它们在表格下方显示表格,它们也向左移动对。我还包含了我的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 &amp; 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;
}

1 个答案:

答案 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>

编辑:还有一件事是将&nbsp;放入空的tds中。空tds可以崩溃