store table用div重构

app/views/stores/index.html.erb

@@ -8,28 +8,33 @@
 		<p>
 			<%= @str_arr.shift %>
 		</p>
-		<table style="width: 100%">
-			<thead>
-				<tr>
-					<td><%=l(:label_attachment)%></td>
-					<td><%=l(:field_downloads)%></td>
-					<td><%=l(:button_download)%></td>
-				</tr>
-			</thead>
-			<tbody>
-			<% k.each do |c1|%>
-				<tr class="<%= cycle 'odd', 'even' %>">
-					<td class="filename" style="width:62%;"><%= link_to c1.filename, (attachFromUrl c1), {:title => c1.filename, :target => "_blank"} %> </td>
-					<td style="width:19%; text-align: center;"><%= c1.downloads %> </td>
-					<td class="filename download_icon" style="width:19%; text-align: center;">
-						<%= link_to_attachment c1, {:download => true, :text => image_tag("/images/button/download.png", width: "22px", alt: l(:button_download)) }%>
-					</td>
-				</tr>
-			<% end %>
-			</tbody>
-		</table>
+
+		<div class="table1">
+			<div class='table_row1'>
+				<div class='table_cell1 filename1' style='text-align: center;'><%=l(:label_attachment)%></div>
+				<div class='table_cell1 filedown1'><%=l(:field_downloads)%></div>
+				<div class='table_cell1 downicon1'><%=l(:button_download)%></div>
+			</div>
+		</div>
+
+		<div class="table1">
+		<% k.each do |c1|%>
+			<div class="table_row1 <%= cycle 'odd', 'even' %>">
+				<div class="filename table_cell1 filename1" >
+					<%= link_to c1.filename, (attachFromUrl c1), {:title => c1.filename, :target => "_blank"} %> 
+				</div>
+				<div  class="table_cell1 filedown1">
+					<%= c1.downloads %>
+				</div>
+				<div class="table_cell1 downicon1 filename download_icon" >
+					<%= link_to_attachment c1, {:download => true, :text => image_tag("/images/button/download.png", width: "22px", alt: l(:button_download)) }%>
+				</div>
+			</div>
+		<% end -%>
+		</div>
+	
 	</div>
-<% reset_cycle; end %>
+<% end; reset_cycle %>
 </div>
 <script type='text/javascript'>
  function validate_required(field,alerttxt)

public/stylesheets/nyan.css

@@ -458,23 +458,44 @@ table.content-text-list tbody tr td.locked, div.memo-section .locked{
 .resource_sum, .line_blo{
   border: 1px solid #eeeeee;
 }
-.line_block table{
-  border: 1px solid #eeeeee;
-}
-.line_block table thead tr{
-  /*background-color: #d1d1d1;*/
-  text-align: center;
-}
-.line_block table td{
-  height: 2em;
-}
 .filename {
-
   overflow: hidden; 
   white-space: nowrap; 
   text-overflow: ellipsis;
   max-width: 247px;
 }
+.line_block .table1{
+  display: table;
+  width: 100%;
+  border-left: 1px solid #eeeeee;
+  border-right: 1px solid #eeeeee;
+  border-bottom: 1px solid #eeeeee;
+}
+.line_block .table_row1{
+  height: 38px;
+  display: table-row;
+  width: 100%;
+}
+.line_block .table_cell1{
+  display: table-cell;
+  padding: 2px;
+  border: 1px solid #FFFFFF;
+  vertical-align: middle;
+}
+
+.line_block .filename1{
+  width: 62%;
+  padding-left: 8px;
+}
+.line_block .filedown1{
+  width: 19%;
+  text-align: center;
+}
+.line_block .downicon1{
+  width: 19%;
+  text-align: center;
+}
+
 .blue-color, .blue-color a{
   color: rgb(109,153,178);
 }