Удалить конкретную границу ячейки в таблице

html css html-table

586 просмотра

2 ответа

21 Репутация автора

Этот <colgroup>тег полезен для применения стилей ко всем столбцам вместо повторения стилей для каждой ячейки для каждой строки.

Я применил colgroupк своему столу, добавив

<colgroup>
  <col span="6" style="border-right: 1px solid #b7b7b7">
</colgroup>

ниже <table>тега. Теперь все ячейки имеют правую границу во всех строках, но мне нужно удалить границу в определенной ячейке. Как я могу это сделать ?

    .details-map:before{
        content: '';
        display: block;
        height: 70px;
    }
    .details-map:after{
        content: '';
        display: block;
        height: 50px;
    }
    .noborder{
    	border-right: 1px solid transparent;
    	border-bottom: 1px solid transparent;
    }
    .noborderall{
    	border-right: 1px solid transparent;
    	border-left: 1px solid transparent;
    }
    .noborderr{
    	border-right: 1px solid transparent;
    }
               <table class="table">
                        <colgroup>
                            <col span="6" style="border-right: 2px solid red">
                        </colgroup>
                        <thead>
                          <tr>
                            <th width="5.4%">Rank</th>
                            <th width="27.3%">School</th>
                            <th width="12.5%">Student to Faculty Ratio</th>
                            <th width="12.5%">Acceptance Rate</th>
                            <th width="11.3%">Graduation Rate</th>
                            <th width="12.3%">Median Debt Incurred</th>
                            <th width="31.2%">Median Earnings/Total Expense</th>
                          </tr>
                        </thead>
                          <tbody>
                            <tr>
                              <th scope="row">1</th>
                              <td>Lorem Ipsum Dolor</td>
                              <td>XX/1</td>
                              <td>XX%</td>
                              <td>XX%</td>
                              <td>$XX,XXX</td>
                              <td>$XX,XXX/$XX,XXX</td>
                            </tr>
                            
                            <tr>
                              <th scope="row">2</th>
                              <td>Lorem Ipsum Dolor</td>
                              <td>XX/1</td>
                              <td>XX%</td>
                              <td>XX%</td>
                              <td>$XX,XXX</td>
                              <td>$XX,XXX/$XX,XXX</td>
                            </tr>
                      </tbody>
                         <tbody class="details-map">
                            <tr>
                              <th scope="row" class="noborder">&nbsp;</th>
                              <th scope="row" >Lorem Ipsum Dolor</th>
                              <th scope="row" class="noborderall">&nbsp;</th>
                              <th scope="row" class="noborderr">&nbsp;</th>
                              <td colspan="3" rowspan="7">
                                  <button class="buttons">School website</button>
                                  <button class="buttons">Financial Aid Office</button>
                                  <button class="buttons">Prospecitve students</button>
                                  <div id="googleMap"></div>
                                  
                              </td>
                            </tr>
                            <tr>
                              <td scope="row" class="noborder">&nbsp;</td>
                              <td scope="row" >Expense Ratio</td>
                              <td scope="row" class="noborderall">&nbsp;</td>
                              <td scope="row" class="noborderr right-align">XX/10</td>
                            </tr>
                            <tr>
                              <td scope="row" class="noborder">&nbsp;</td>
                              <td scope="row" >Acceptance Rate Score</td>
                              <td scope="row" class="noborderall">&nbsp;</td>
                              <td scope="row" class="noborderr right-align">XX/10</td>
                            </tr>
                            <tr>
                              <td scope="row" class="noborder">&nbsp;</td>
                              <td scope="row" class="left-align">Graduation Rate Score</td>
                              <td scope="row" class="noborderall">&nbsp;</td>
                              <td scope="row" class="noborderr right-align">XX/10</td>
                            </tr>
                            <tr>
                              <td scope="row" class="noborder">&nbsp;</td>
                              <td scope="row" class="left-align">ROI/Value</td>
                              <td scope="row" class="noborderall">&nbsp;</td>
                              <td scope="row" class="noborderr right-align">XX/10</td>
                            </tr>
                            <tr>
                              <td scope="row" class="noborder">&nbsp;</td>
                              <td scope="row" >Student to Faculty Ratio</td>
                              <td scope="row" class="noborderall">&nbsp;</td>
                              <td scope="row" class="noborderr right-align">XX/10</td>
                            </tr>
                            <tr>
                              <td colspan="4" scope="row" class="noborderr" >
                              <h2>About the scores</h2>
                              <p>
                                  Using a complex algorithm our review tool examines all of the schools in Pennsylvania that offer Computer Science Majors and provides a score for several categories.
                              </p>
                             </td>
                            </tr>  
                      </tbody>
                           <tbody>
                            
                            <tr>
                              <th scope="row">3</th>
                              <td>Lorem Ipsum Dolor</td>
                              <td>XX/1</td>
                              <td>XX%</td>
                              <td>XX%</td>
                              <td>$XX,XXX</td>
                              <td>$XX,XXX/$XX,XXX</td>
                            </tr>
                         
                         </tbody>
                    </table>

Заполнение не работает, tbodyпоэтому я использовал до и после псевдоэлементов, чтобы добавить пространство. В этом месте мне нужно удалить границу.

Автор: Kareem Abdelwahed Источник Размещён: 18.07.2016 10:52

Ответы (2)


1 плюс

747 Репутация автора

вы можете указать идентификатор или класс по вашему выбору col (который не должен иметь границы) и добавить к нему свойство border: none

HTML:

<colgroup>
  <col span="6" style="border-right: 1px solid #b7b7b7">
<col span="6" style="border-right: 1px solid #b7b7b7">
<col span="6" style="border-right: 1px solid #b7b7b7">
<col span="6" class="tb" style="border-right: 1px solid #b7b7b7">
</colgroup>

CSS:

.tb{
 border:none;
}
Автор: 5eeker Размещён: 18.07.2016 11:04

0 плюса

1 Репутация автора

Я создал демо для удаления конкретной границы ячейки. Демо-таблица Ссылка

CSS

tr:nth-child(5) td:nth-child(2) {
  border-right: hidden;
}
Автор: Jitendra Thakur Размещён: 18.07.2016 11:32
Вопросы из категории :
32x32