2017-10-30 6 views
1

私はheadcellでダブルボーダーを追加しようとしていますが、背景イメージを使用しないと難しいと感じています。出来ますか?HTMLテーブルのボーダートップ2 px

私は白い色のボーダートップを持っていますが、私は白の上にグレーの色が欲しいです。だから、ボーダートップのcccやfffのようなものです。

私が持っている私が欲しいenter image description here

enter image description here

マイHTML & CSS:

私はCSSでそれを行うことができることを知って

table.hor-zebra { 
 
    width: 100%; 
 
    text-align: left; 
 
    border-collapse: collapse; 
 
    border: #cccccc 1px solid; 
 
} 
 

 
table.hor-zebra>thead { 
 
    border-top: #cccccc 1px solid; 
 
} 
 

 
table.hor-zebra>thead>tr>th { 
 
    background: #e2e2e2; 
 
    border-top: #ffffff 1px solid; 
 
    border-bottom: #cccccc 1px solid; 
 
    padding: 4px; 
 
    color: #000; 
 
} 
 

 
table.hor-zebra>tbody>tr>td { 
 
    background: #f3f3f3; 
 
    border-bottom: #cccccc 1px solid; 
 
    padding: 8px 4px 8px 4px; 
 
} 
 

 
table.hor-zebra>tbody>tr>td.odd { 
 
    background: #f8f8f8; 
 
    border-bottom: #cccccc 1px solid; 
 
} 
 

 
table.hor-zebra>tbody>tr:hover td { 
 
    background: #faf4f2; 
 
}
<table class="hor-zebra"> 
 
    <thead> 
 
    <tr> 
 
     <th scope="col"> 
 
     <span>Title</span> 
 
     </th> 
 
     <th scope="col"> 
 
     <span>Date</span> 
 
     </th> 
 
     <th scope="col"> 
 
     <span>Actions</span> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 

 
    <tbody> 
 

 
    <tr> 
 
     <td class="odd"> 
 
     <a href="x">x</a> 
 
     </td> 
 
     <td class="odd"> 
 
     <span>2017-10-30 19:06:27</span> 
 
     </td> 
 
     <td class="odd"> 
 
     <span> 
 
\t \t \t <a href="index.php?open=pages&amp;page=edit_page&amp;page_id=1&amp;editor_language=en">Edit</a> 
 
\t \t \t &middot; 
 
\t \t \t <a href="index.php?open=pages&amp;page=delete_page&amp;page_id=1&amp;editor_language=en">Delete</a> 
 
\t \t \t </span> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <a href="x">awd</a> 
 
     </td> 
 
     <td> 
 
     <span>2017-10-30 19:06:35</span> 
 
     </td> 
 
     <td> 
 
     <span> 
 
\t \t \t <a href="index.php?open=pages&amp;page=edit_page&amp;page_id=2&amp;editor_language=en">Edit</a> 
 
\t \t \t &middot; 
 
\t \t \t <a href="index.php?open=pages&amp;page=delete_page&amp;page_id=2&amp;editor_language=en">Delete</a> 
 
\t \t \t </span> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="odd"> 
 
     <a href="x">awd</a> 
 
     </td> 
 
     <td class="odd"> 
 
     <span>2017-10-30 19:14:53</span> 
 
     </td> 
 
     <td class="odd"> 
 
     <span> 
 
\t \t \t <a href="index.php?open=pages&amp;page=edit_page&amp;page_id=3&amp;editor_language=en">Edit</a> 
 
\t \t \t &middot; 
 
\t \t \t <a href="index.php?open=pages&amp;page=delete_page&amp;page_id=3&amp;editor_language=en">Delete</a> 
 
\t \t \t </span> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <a href="x">awd</a> 
 
     </td> 
 
     <td> 
 
     <span>2017-10-30 19:15:07</span> 
 
     </td> 
 
     <td> 
 
     <span> 
 
\t \t \t <a href="index.php?open=pages&amp;page=edit_page&amp;page_id=4&amp;editor_language=en">Edit</a> 
 
\t \t \t &middot; 
 
\t \t \t <a href="index.php?open=pages&amp;page=delete_page&amp;page_id=4&amp;editor_language=en">Delete</a> 
 
\t \t \t </span> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="odd"> 
 
     <a href="x">awd</a> 
 
     </td> 
 
     <td class="odd"> 
 
     <span>2017-10-30 19:16:47</span> 
 
     </td> 
 
     <td class="odd"> 
 
     <span> 
 
\t \t \t <a href="index.php?open=pages&amp;page=edit_page&amp;page_id=5&amp;editor_language=en">Edit</a> 
 
\t \t \t &middot; 
 
\t \t \t <a href="index.php?open=pages&amp;page=delete_page&amp;page_id=5&amp;editor_language=en">Delete</a> 
 
\t \t \t </span> 
 
     </td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

答えて

4

....

https://www.w3.org/TR/CSS21/tables.html#value-def-table,https://www.w3.org/wiki/CSS/Properties/border-collapse

border

様々な境界特性がborder-collapsetable要素上collapseに設定されている場合にのみ、カラムに適用します。その場合、列および列グループに設定された境界線は、すべてのセルエッジで境界スタイルを選択する競合解決アルゴリズムに入力されます。あなたは子要素の前に何かに必要satisationで

table.hor-zebra { 
 
    width: 100%; 
 
    text-align: left; 
 
    border-spacing:0; 
 
    border: #cccccc 1px solid; 
 
} 
 

 
table.hor-zebra>thead { 
 
    border-top: #cccccc 1px solid; 
 
} 
 

 
table.hor-zebra>thead>tr>th { 
 
    background: #e2e2e2; 
 
    border-top: #ffffff 1px solid; 
 
    border-bottom: #cccccc 1px solid; 
 
    padding: 4px; 
 
    color: #000; 
 
} 
 

 
table.hor-zebra>tbody>tr>td { 
 
    background: #f3f3f3; 
 
    border-bottom: #cccccc 1px solid; 
 
    padding: 8px 4px 8px 4px; 
 
} 
 

 
table.hor-zebra>tbody>tr>td.odd { 
 
    background: #f8f8f8; 
 
    border-bottom: #cccccc 1px solid; 
 
} 
 

 
table.hor-zebra>tbody>tr:hover td { 
 
    background: #faf4f2; 
 
}
<table class="hor-zebra"> 
 
    <thead> 
 
    <tr> 
 
     <th scope="col"> 
 
     <span>Title</span> 
 
     </th> 
 
     <th scope="col"> 
 
     <span>Date</span> 
 
     </th> 
 
     <th scope="col"> 
 
     <span>Actions</span> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 

 
    <tbody> 
 

 
    <tr> 
 
     <td class="odd"> 
 
     <a href="x">x</a> 
 
     </td> 
 
     <td class="odd"> 
 
     <span>2017-10-30 19:06:27</span> 
 
     </td> 
 
     <td class="odd"> 
 
     <span> 
 
\t \t \t <a href="index.php?open=pages&amp;page=edit_page&amp;page_id=1&amp;editor_language=en">Edit</a> 
 
\t \t \t &middot; 
 
\t \t \t <a href="index.php?open=pages&amp;page=delete_page&amp;page_id=1&amp;editor_language=en">Delete</a> 
 
\t \t \t </span> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <a href="x">awd</a> 
 
     </td> 
 
     <td> 
 
     <span>2017-10-30 19:06:35</span> 
 
     </td> 
 
     <td> 
 
     <span> 
 
\t \t \t <a href="index.php?open=pages&amp;page=edit_page&amp;page_id=2&amp;editor_language=en">Edit</a> 
 
\t \t \t &middot; 
 
\t \t \t <a href="index.php?open=pages&amp;page=delete_page&amp;page_id=2&amp;editor_language=en">Delete</a> 
 
\t \t \t </span> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="odd"> 
 
     <a href="x">awd</a> 
 
     </td> 
 
     <td class="odd"> 
 
     <span>2017-10-30 19:14:53</span> 
 
     </td> 
 
     <td class="odd"> 
 
     <span> 
 
\t \t \t <a href="index.php?open=pages&amp;page=edit_page&amp;page_id=3&amp;editor_language=en">Edit</a> 
 
\t \t \t &middot; 
 
\t \t \t <a href="index.php?open=pages&amp;page=delete_page&amp;page_id=3&amp;editor_language=en">Delete</a> 
 
\t \t \t </span> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <a href="x">awd</a> 
 
     </td> 
 
     <td> 
 
     <span>2017-10-30 19:15:07</span> 
 
     </td> 
 
     <td> 
 
     <span> 
 
\t \t \t <a href="index.php?open=pages&amp;page=edit_page&amp;page_id=4&amp;editor_language=en">Edit</a> 
 
\t \t \t &middot; 
 
\t \t \t <a href="index.php?open=pages&amp;page=delete_page&amp;page_id=4&amp;editor_language=en">Delete</a> 
 
\t \t \t </span> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td class="odd"> 
 
     <a href="x">awd</a> 
 
     </td> 
 
     <td class="odd"> 
 
     <span>2017-10-30 19:16:47</span> 
 
     </td> 
 
     <td class="odd"> 
 
     <span> 
 
\t \t \t <a href="index.php?open=pages&amp;page=edit_page&amp;page_id=5&amp;editor_language=en">Edit</a> 
 
\t \t \t &middot; 
 
\t \t \t <a href="index.php?open=pages&amp;page=delete_page&amp;page_id=5&amp;editor_language=en">Delete</a> 
 
\t \t \t </span> 
 
     </td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

0

、あなたは疑似を使用することができます前に。

これを試してみてください。

table.hor-zebra>thead>tr>th { 
background: #e2e2e2; 
border-top: #ffffff 3px solid; 
border-bottom: #cccccc 1px solid; 
padding: 4px; 
color: #000; 
posistion:relative; 
} 
table.hor-zebra>thead>tr>th:before{ 
    content:""; 
    position:absolute; 
    height:2px; 
    width:100%; 
    background-color:#cccccc; 
    top:-1px; 
    left:-1px; 
} 
関連する問題