CSS 테두리가 접히지 않음

Question

테두리를 표시하지 않도록 내부 테이블을 가져 오는 데 문제가 있습니다.

아래 html은 <table class="billing_history" id="billing_history0" >입니다. 테이블에 궁극적으로 행의 위쪽과 아래쪽 테두리 만 있으면 좋겠지 만 작동시킬 수는 없습니다. 사실, 나는 테이블에 적용 할 테두리 속성을 많이 얻지 못하는 것 같습니다. 특히, 내가 CSS에서 border-collapse: collapse; 설정했지만 그 내부 테이블에 적용되지 않았다. 그러나 표 자체 (예 : style="border-collapse: collapse;")에 스타일 태그를 설정하면 작동합니다. 따라서 어떤 이유로 CSS의 border-collapse: collapse;이 내부 표에 적용되지 않고 다른 속성 (예 : font-size: 11px;)이 적용됩니다.

누구든지 아이디어가 있습니까? HTML 및 CSS는 아래에 있습니다.

여러분의 의견을 기다리게되었습니다.

HTML :

<table id="bill-list"> 
<thead> 
    <tr> 
      <th>Service Date</th> 
      <th>Time</th> 
      <th>Patient Name</th> 
      <th>Remarks</th> 
      <th>Notes</th> 
      <th>Service Description</th> 
      <th>COMMENTS</th> 
    </tr> 
</thead> 
<tbody> 
      <tr id="bill0" class="no-bills" onclick="showBillDetails(0); setFocusOnFirstInputField(0);"> 
        <td class="no-bills">2009-03-03&nbsp;</td> 
        <td class="no-bills">09:45:00&nbsp;</td> 
        <td class="no-bills">bob</td> 
        <td class="no-bills">asdfasdf</td> 
        <td class="no-bills">asdfasdf</td> 
        <td class="no-bills">asdfasdf</td> 
        <td class="no-bills">blahblah</td> 

      </tr> 
      <tr id="bill"> 
       <td id="bill_details0" style="display:;" colspan=7> 
        <span onclick="addBillingItem(0)" style="color:blue;">Add Item</span>   
        <table> 
         <thead> 
          <tr> 
           <td></td> 
           <td>Billing Code</td> 
           <td>Amount</td> 
           <td>Units</td> 
           <td>Dx Code</td> 
           <td>Dx Description</td> 
           <td>Total</td> 
           <td>SLI Code</td> 
          </tr> 
         <thead> 
         <tbody id="billing_items0"> 
           <tr id="billing_item0_0"> 
            <td onclick="deleteBillingItem(0, 0)" style="color:blue;">X</td> 
            <td> <input type="text" size="6" name="bill_code0[]" onkeydown="if (isMoveBetweenBills(event)) { moveBetweenBills(event, 0); }" /> </td> 
            <td> <input type="text" size="6" name="amount0[]" onkeydown="if (isMoveBetweenBills(event)) { moveBetweenBills(event, 0); }" /> </td> 

            <td> <input type="text" size="3" name="units0[]" onkeydown="if (isMoveBetweenBills(event)) { moveBetweenBills(event, 0); }" /> </td> 
            <td> <input type="text" size="6" name="dx_code0[]" onkeydown="if (isMoveBetweenBills(event)) { moveBetweenBills(event, 0); }" /> </td> 
            <td> <input type="text" size="12" name="dx_desc0[]" onkeydown="if (isMoveBetweenBills(event)) { moveBetweenBills(event, 0); }" /> </td> 
            <td> <input type="text" size="6" name="total0[]" onkeydown="if (isTabKey(event) && checkIfLastBillingItem(0, 0)) { addBillingItem(0); } else if (isEnterKey(event)) { submitBill(0); } return true;" /> </td> 
            <td> <input type="text" size="6" name="sli_code0[]" /> </td> 

           </tr> 

         </tbody> 
        </table> 
        <span id="more_details_button0" onclick="showMoreDetails(0, 34601,); " style="color:blue;">more</span> 
        <table class="more_details"> 
         <tr> 
          <td> 
           <table class="billing_history" id="billing_history0" > 
           <tbody><tr><td>1234</td><td>2012-01-01</td><td>09:00:00</td><td>0.00</td><td>0.00</td><td>n/a</td></tr><tr><td>1234</td><td>0.00</td><td>1</td><td>1</td><td>----</td><td>0.00</td></tr><tr><td>1234</td><td>0.00</td><td>1</td><td>1</td><td>blah blah</td><td>0.00</td></tr></tbody> 
           </table> 

          </td> 
          <td> 
           <table id="appointment_notes0" > 
           </table> 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
</tbody> 
</table> 

CSS :

#bill-list #bill table 

경계 붕괴에 국경의 붕괴를 설정에 대한 단지에 따라 테이블이 아닌 TD 적용 방법

.search_details 
{ 
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
    font-size: 12px; 
    margin: 10px; 
    width: 60%; 
    text-align: left; 
    border-collapse: collapse; 
} 

#bill-list 
{ 
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
    font-size: 12px; 
    /*margin: 45px;*/ 
    width: 100%; 
    text-align: left; 
    border-collapse: collapse; 
} 
#bill-list th 
{ 
    font-size: 13px; 
    font-weight: normal; 
    padding: 8px; 
    background: #b9c9fe; 
    border-top: 4px solid #aabcfe; 
    border-bottom: 1px solid #fff; 
    color: #039; 
} 
#bill-list td 
{ 
    padding: 8px; 
    background: #e8edff; 
    border-bottom: 1px solid #fff; 
    color: #669; 
    font-weight: normal; 
    border-top: 1px solid transparent; 
} 
#bill-list tr:hover td 
{ 
    background: #d0dafd; 
    color: #339; 
    font-weight: normal; 
} 

#bill-list #bill td 
{ 
    background: white; 
} 

#bill-list .no-bills 
{ 
    background: #e8edff; 
    color: red; 
    font-weight: bold; 

} 
#bill-list tr:hover .no-bills 
{ 
    background: #d0dafd; 
    color: red; 
    font-weight: bold; 
} 


#bill-list #bill .more_details tr td 
{ 
    background: #e8edff; 
    border: none; 
} 

#bill-list #bill .billing_history tr td 
{ 
    background: red; 
    border: none; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid #fff; 

    font-size: 11px; 
    padding: 1px; 

    text-decoration:none; 
    border-style:none; 
    border:none; 
    outline:none; 
    border-collapse: collapse; 
} 

Answer 1

mozilla doco