HTML-dreamweaver, как дать одну ячейку 3 стороны границ, а не каждую сторону

Question

Я хочу сделать таблицу, подобную этой, показанной в HTML.

Теперь я использовал DreamWeaver CS6 нарисовать таблицу путем вставки таблицы и слияние некоторых клеток. Dreamweaver может генерировать код автоматически. Я хочу дать границу на 3 стороны (не 4 стороны) объединенной ячейки только как показано на рисунке с выделенным зеленым циклом. Как я могу это достичь?

Спасибо за ваше предложение заранее.

Answer 1

Только 3 границы? У меня только CS6, и я предполагаю, что вы используете CC, поэтому я просто дам вам CSS, и вы можете его вставить.

table { 
 
    width: 500px; 
 
    border-collapse: separate; 
 
    table-layout: fixed; 
 
    border-spacing: 4px; 
 
    border: 1px solid grey; 
 
} 
 
td { 
 
    border: 2px dashed blue; 
 
} 
 
th { 
 
    border: 2px dashed green; 
 
} 
 
.specCell { 
 
    border-bottom: 1px solid red; 
 
    border-top: 1px solid red; 
 
    border-left: 1px solid red; 
 
    border-right: 0; 
 
}

<table> 
 
    <caption>3 Borders</caption> 
 
    <thead> 
 
    <tr> 
 
     <th class="specCell">3 Border TH</th> 
 
     <th>TH</th> 
 
     <th>TH</th> 
 
     <th>TH</th> 
 
    </tr> 
 
    <tbody> 
 
     <tr> 
 
     <td>TD</td> 
 
     <td>TD</td> 
 
     <td class="specCell">3 Border TD</td> 
 
     <td>TD</td> 
 
     </tr> 
 
     <tr> 
 
     <td>TD</td> 
 
     <td>TD</td> 
 
     <td>TD</td> 
 
     <td class="specCell">3 Border TD</td> 
 
     </tr> 
 
     <tr> 
 
     <td>TD</td> 
 
     <td class="specCell">3 Border TD</td> 
 
     <td>TD</td> 
 
     <td>TD</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="specCell">3 Border TD</td> 
 
     <td>TD</td> 
 
     <td>TD</td> 
 
     <td>TD</td> 
 
     </tr> 
 
    </tbody> 
 
</table>