html - 如何让中继器填满屏幕的宽度？

Question

我正在使用 Repeater 创建网格，但网格没有填满屏幕的宽度。它切断并在中继器的末端和右侧的边框之间留下空白。

我尝试设置最后一个 <td>标记为 width:100%这确实使线条一直穿过，但它导致所有其他列移到最左边并破坏了布局。

代码:

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

我只想让边界线覆盖所有屏幕并且不留空隙。

Answer 1

我设置:

table {
  width: 100%;
}

这样表格就会覆盖整个窗口。然后我可以选择以 px 或 % 为单位为每列提供不同的宽度，最好的方法是使用 Bootstrap 类。所以包含在你的标题中

然后您可以设置一个类，例如 col-md-4 来为该列提供 4 列的跨度，您还可以隐藏 sm 屏幕的列并执行其他效果。去检查一下

http://getbootstrap.com/css/#grid

或者问我更多信息

法布里齐奥·贝尔托利奥