How to get repeater to fill the width of the screen? - html

Question

I'm using a Repeater to create a grid but the grid doesn't fill the width of the screen. It cut offs and leaves blank spaces between the end of the repeater and the border on the right.
I tried setting the last <td> tag to width:100% which did make the line go all the way across but it caused all the other columns to move over to the far left and ruined the layout.
Code:
<tr>
<td style="border-left:1px solid; border-right:1px solid; height:400px" >
<asp:Repeater ID="rptHazDetails" runat="server">
<HeaderTemplate>
<table border="1">
<tr style="border-bottom:1px solid;">
<td>
UN Number, </br>
Proper Shipping Name
</td>
<td style="padding:5px">
Class , </br>
Packing Group
</td>
<td style="padding:5px">
Pieces
</td>
<td style="padding:5px">
Tunnel Code
</td>
<td style="padding:5px">
Gross KG
</td>
<td style="padding:5px">
Net KG
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr style="border-bottom:1px solid;">
<td style="padding:5px;">
<asp:Label ID="lblUNNumber" runat="server" Text='<%# Eval("UnNumber") %>' /> </br>
<asp:Label ID="lblProper" runat="server" Text='<%# Eval("Packages") %>' />
</td>
<td style="padding:5px;">
<asp:Label ID="lblClass" runat="server" Text='<%# Eval("IMOClass") %>' /> </br>
<asp:Label ID="lblPacking" runat="server" Text='<%# Eval("IMOPage") %>' />
</td>
<td style="padding:5px;">
<asp:Label ID="lblPieces" runat="server" Text='<%# Eval("PieceBreakDown") %>' />
</td>
<td style="padding:5px;">
<asp:Label ID="lblTunnelCode" runat="server" Text='<%# Eval("TunnelCode") %>' />
</td>
<td style="padding:5px;">
<asp:Label ID="lblGrossWeight" runat="server" Text='<%# Eval("GrossWeight","{0:0.##}") %>' />
</td>
<td style="padding:5px;">
<asp:Label ID="lblNetWeight" runat="server" Text='<%# Eval("NetWeight","{0:0.##}") %>' />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</td>
</tr>
I just want to border lines to reach all the across the screens and don't leave a gap.

Answer 1

I set:
table {
width: 100%;
}
This way the table will cover the entire window. I then can choose to give each column a different width in px or %, the best way is using bootstrap classes. So include in your header
Then you can set a class for example col-md-4 for giving that column a span of 4 columns, you can also hide the column for sm screens and do other effects. Go and check
http://getbootstrap.com/css/#grid
Or ask me more informations
Fabrizio Bertoglio