1

内側のテーブルに境界線が表示されないようにするのに問題があります。

以下のhtmlでは、それはテーブル<table class="billing_history" id="billing_history0" >です。テーブルに最終的に行の上下の境界線だけを持たせたいのですが、それを機能させることができませんでした。実際、テーブルに適用する多くの境界線プロパティを取得できなかったようです。特に、border-collapse: collapse;cssで設定してみましたが、内側のテーブルには当てはまりませんでした。ただし、テーブル自体にスタイルタグを設定すると(つまりstyle="border-collapse: collapse;")、機能します。したがって、何らかの理由でborder-collapse: collapse;、cssのinは内部テーブルに適用されていませんが、他のプロパティ(つまり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:

.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;
}
4

1 に答える 1

3

ボーダーコラプスをオンに設定してみませんか

#bill-list #bill table

mozilla docoによると、border-collapseはテーブルにのみ適用され、tdには適用されません。

于 2012-07-29T03:21:47.347 に答える