2016-12-21 7 views
0

私は非常に単純なHTMLテーブルを持っていて、行のうちの1つがtdcolspanという属性を持っています。対応するtrに適用されたborder-bottomは、colspanには影響しませんが、非スパム列にのみ影響します。これはクロムでのみ起こります。クロム、colspanと境界

この問題を強調するサンプルコード。 Recent Itemsの行にはクロムの行全体に罫線がないことに注意してください。

.x1hu { 
 
    height: 28px; 
 
    border-bottom: 1px solid black; 
 
} 
 
.x1hw { 
 
    text-align: left; 
 
    font-weight: bold; 
 
    height: 28px; 
 
    color: #000000; 
 
    border-bottom: 1px solid #D6DFE6; 
 
} 
 
.x1hs { 
 
    border-collapse: collapse; 
 
    table-layout: fixed; 
 
} 
 
.x1hx { 
 
    font-weight: bold; 
 
    border-bottom: 1px solid red; 
 
}
<table role="grid" class="x1hs" aria-rowcount="5"> 
 
    <tr class="x1hw"> 
 
     <th>Name</th> 
 
     <th>Title</th> 
 
     <th>Contact Email</th> 
 
     <th><span style="font-style:italic">Specializations</span></th> 
 
    </tr> 
 
    <tr class="x1hx"> 
 
     <td colpsan="4">Recent Items</td> 
 
    </tr> 
 
    <tr class="x1hu" id="dmoTpl:iSearch2::item0" aria-rowindex="1" data-afr-value="469"> 
 
     <td>Lester Shull</td> 
 
     <td>Analyst</td> 
 
     <td>[email protected]</td> 
 
     <td><span style="font-style:italic">filing, fresher, physio, </span></td> 
 
    </tr> 
 
    <tr class="x1hu" id="dmoTpl:iSearch2::item1" aria-rowindex="2" data-afr-value="299"> 
 
     <td>Jennefer Patrick</td> 
 
     <td>Contractor</td> 
 
     <td>[email protected]</td> 
 
     <td><span style="font-style:italic"></span></td> 
 
    </tr> 
 
    <tr class="x1hu" id="dmoTpl:iSearch2::item2" aria-rowindex="3" data-afr-value="2072"> 
 
     <td>Alexis Prentice</td> 
 
     <td>Contractor</td> 
 
     <td>[email protected]</td> 
 
     <td><span style="font-style:italic">support, veteran, ERT, </span></td> 
 
    </tr> 
 
    <tr class="x1hu" id="dmoTpl:iSearch2::item3" aria-rowindex="4" data-afr-value="4641"> 
 
     <td>Hyun Mathias</td> 
 
     <td>Supervisor</td> 
 
     <td>[email protected]</td> 
 
     <td><span style="font-style:italic"></span></td> 
 
    </tr> 
 
    <tr class="x1hu" id="dmoTpl:iSearch2::item4" aria-rowindex="5" data-afr-value="3900"> 
 
     <td>Douglas Hildreth</td> 
 
     <td>Manager</td> 
 
     <td>[email protected]</td> 
 
     <td><span style="font-style:italic">mentor, </span></td> 
 
    </tr> 
 
</table>

+3

を書いた:TDのはcolspan = "4 <ここに' ">あなたが書いた** colpsan ** – Banzay

+0

@Banzayはい、あなたは正しいです –

+0

ああ!それだけです、それは働いた。私はそれがちょうどこれだとは信じられない。ありがとう! – Arjun

答えて

2

あなたはタイプミスをした:ここ<td colspan="4">あなたはあなたがタイプミスをしたcolpsan

.x1hu { 
 
    height: 28px; 
 
    border-bottom: 1px solid black; 
 
} 
 
.x1hw { 
 
    text-align: left; 
 
    font-weight: bold; 
 
    height: 28px; 
 
    color: #000000; 
 
    border-bottom: 1px solid #D6DFE6; 
 
} 
 
.x1hs { 
 
    border-collapse: collapse; 
 
    table-layout: fixed; 
 
} 
 
.x1hx { 
 
    font-weight: bold; 
 
    border-bottom: 1px solid red; 
 
}
<table role="grid" class="x1hs" aria-rowcount="5"> 
 
    <tr class="x1hw"> 
 
     <th>Name</th> 
 
     <th>Title</th> 
 
     <th>Contact Email</th> 
 
     <th><span style="font-style:italic">Specializations</span></th> 
 
    </tr> 
 
    <tr class="x1hx"> 
 
     <td colspan="4">Recent Items</td> 
 
    </tr> 
 
    <tr class="x1hu" id="dmoTpl:iSearch2::item0" aria-rowindex="1" data-afr-value="469"> 
 
     <td>Lester Shull</td> 
 
     <td>Analyst</td> 
 
     <td>[email protected]</td> 
 
     <td><span style="font-style:italic">filing, fresher, physio, </span></td> 
 
    </tr> 
 
    <tr class="x1hu" id="dmoTpl:iSearch2::item1" aria-rowindex="2" data-afr-value="299"> 
 
     <td>Jennefer Patrick</td> 
 
     <td>Contractor</td> 
 
     <td>[email protected]</td> 
 
     <td><span style="font-style:italic"></span></td> 
 
    </tr> 
 
    <tr class="x1hu" id="dmoTpl:iSearch2::item2" aria-rowindex="3" data-afr-value="2072"> 
 
     <td>Alexis Prentice</td> 
 
     <td>Contractor</td> 
 
     <td>[email protected]</td> 
 
     <td><span style="font-style:italic">support, veteran, ERT, </span></td> 
 
    </tr> 
 
    <tr class="x1hu" id="dmoTpl:iSearch2::item3" aria-rowindex="4" data-afr-value="4641"> 
 
     <td>Hyun Mathias</td> 
 
     <td>Supervisor</td> 
 
     <td>[email protected]</td> 
 
     <td><span style="font-style:italic"></span></td> 
 
    </tr> 
 
    <tr class="x1hu" id="dmoTpl:iSearch2::item4" aria-rowindex="5" data-afr-value="3900"> 
 
     <td>Douglas Hildreth</td> 
 
     <td>Manager</td> 
 
     <td>[email protected]</td> 
 
     <td><span style="font-style:italic">mentor, </span></td> 
 
    </tr> 
 
</table>

関連する問題