ブートストラップを使用してラベルの幅を固定する方法

Question

ブートストラップ12列に従ってラベルの幅を修正したい。さまざまなデバイスで以下の設定を行うことで、これを12列に渡る方法。 OK（ASPなし）...ブートストラップテーブルで

<div class="row"> 
    <div class="form-group"> 
     <div class="col-md-12 col-sm-12 col-xs-12"> 
      <div style="height: 30px; margin: 0; padding: 3"> 
       <table cellspacing="0" cellpadding="3" rules="all" border="1" id="tblHeader" 
        style="background-color: #336666; color: white; border-collapse: collapse; height: 100%;"> 
        <tr> 
         <td class="col-md-1 col-sm-1 col-xs-1" style="text-align: center"> 
          <asp:Label ID="Label1" CssClass="control-label" runat="server" Text="ID"></asp:Label> 
         </td> 
         <td class="col-md-2 col-sm-2 col-xs-2" style="text-align: center"> 
          <asp:Label ID="Label2" CssClass="control-label" runat="server" Text="Employee Name"></asp:Label> 
         </td> 
         <td class="col-md-2 col-sm-2 col-xs-2" style="text-align: center"> 
          <asp:Label ID="Label3" CssClass="control-label" runat="server" Text="Company"></asp:Label> 
         </td> 
         <td class="col-md-2 col-sm-2 col-xs-2" style="text-align: center"> 
          <asp:Label ID="Label4" CssClass="control-label" runat="server" Text="Department"></asp:Label> 
         </td> 
         <td class="col-md-2 col-sm-2 col-xs-2" style="text-align: center"> 
          <asp:Label ID="Label5" CssClass="control-label" runat="server" Text="Designation"></asp:Label> 
         </td> 
         <td class="col-md-1 col-sm-1 col-xs-1" style="text-align: center"> 
          <asp:Label ID="Label6" CssClass="control-label" runat="server" Text="Active"></asp:Label> 
         </td> 
         <td class="col-md-2 col-sm-2 col-xs-2" style="text-align: center"> 
          <asp:Label ID="lblOption" CssClass="control-label" runat="server" Text="Option"></asp:Label> 
         </td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

は、私たちが間違っているものを確認することができるようにjsfiddleにそれを作る幅

 <div class="col-md-12 col-sm-12 col-xs-12"> 
      <div style="height: 30px; margin: 0; padding: 3"> 
       <table cellspacing="0" cellpadding="3" rules="all" border="1" id="tblHeader" 
        style="background-color: #336666; color: white; border-collapse: collapse; height: 100%;"> 
        <tr> 
         <th class="col-md-1 col-sm-1 col-xs-1" style="text-align: center"> 
          your column title 
         </th> 
         <th class="col-md-2 col-sm-2 col-xs-2" style="text-align: center"> 
          your column title 
         </th> 
         <th class="col-md-2 col-sm-2 col-xs-2" style="text-align: center"> 
          your column title 
         </th> 
         <th class="col-md-2 col-sm-2 col-xs-2" style="text-align: center"> 
         your column title 
         </th> 
         <th class="col-md-2 col-sm-2 col-xs-2" style="text-align: center"> 
          your column title 
         </th> 
         <th class="col-md-1 col-sm-1 col-xs-1" style="text-align: center"> 
          your column title 
         </th> 
         <th class="col-md-2 col-sm-2 col-xs-2" style="text-align: center"> 
          your column title 
         </th> 
        </tr> 

        <tr> 
         <td > 
          <asp:Label ID="Label1" CssClass="control-label" runat="server" Text="ID"></asp:Label> 
         </td> 
         <td > 
          <asp:Label ID="Label2" CssClass="control-label" runat="server" Text="Employee Name"></asp:Label> 
         </td> 
         <td > 
          <asp:Label ID="Label3" CssClass="control-label" runat="server" Text="Company"></asp:Label> 
         </td> 
         <td > 
          <asp:Label ID="Label4" CssClass="control-label" runat="server" Text="Department"></asp:Label> 
         </td> 
         <td > 
          <asp:Label ID="Label5" CssClass="control-label" runat="server" Text="Designation"></asp:Label> 
         </td> 
         <td > 
          <asp:Label ID="Label6" CssClass="control-label" runat="server" Text="Active"></asp:Label> 
         </td> 
         <td > 
          <asp:Label ID="lblOption" CssClass="control-label" runat="server" Text="Option"></asp:Label> 
         </td> 
        </tr> 
       </table> 
      </div> 
     </div>