Twitter 부트 스트랩 테이블 크기 조정, 행 오버플로

Question

트위터 부트 스트랩에 테이블이 붙어 있습니다. 내가 뭘 하려는지 상관없이 나는 스팬 내에 내 테이블을 가져올 수 없다. 부트 스트랩 CSS와 관련이 있다고 생각한다. 스팬이나 영웅 유닛 내 테이블 행을 정당화해야한다.

<div class="table-responsive"> 
    <table id="table" 
      class="table table-bordered table-condensed table-striped form-group"> 
    <tbody> 
     <tr> 
     <th>Sl. No.</th> 
     <th class="">Name</th> 
     <th>C/NC</th> 
     <th class="">Quantity</th> 
     <th>Price</th> 
     <th><input type="button" class="btn btn-success" id="addmorebutton" 
        value="Add" onclick="addRow();"/></th> 
     </tr> 
     <tr id="templateRow"> 
     <td><input type="text" placeholder="In Words"></td> 
     <td class=""><input type="text" placeholder="In Words"></td> 
     <td> 
      <select class="input-sm col-lg-2"> 
       <option>Consumable</option> 
       <option>Non Consumable</option> 
      </select> 
     </td> 
     <td class=""><input type="text" placeholder="In Numbers"></td> 
     <td><input type="text" placeholder="In Numbers"></td> 
     <td><input type="button" class="btn btn-danger" id="addmorebutton" 
        value="Delete" onclick="delRow(this);"/></td> 
    </tr> 
    </tbody> 
</table> 
</div> 

Answer 1

당신이 부모에게 span 요소를 스타일링에 의해 총수 table을 시도하는 경우에, 당신은 블록 레벨 요소로 범위를 확인해야합니다. 스팬은 본질적으로 블록 레벨 요소가 아닙니다. 따라서 페이지가 축소되어 페이지 흐름 내에 테이블이 포함되지 않습니다. block 또는 inline-block을 사용하면 스팬을 적절히 포함하도록 변경할 수 있습니다. 그러나 쉽게하기 위해 블록 수준 요소를 사용하여 div과 같이 시작하거나 표 자체의 스타일을 지정할 수 있습니다.

<span> CSS에 display:block;을 사용해보세요. 이렇게하면 하위 요소가 포함됩니다.

더 이상의 정보가 없으면 달성하려는 것을 이해하기 어렵습니다. 블록 수준 요소에 대한 추가 정보 : https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements