Я хочу скрыть границу для определенных строк таблицы. Как это сделать?
Любая идея?
Пример кода высоко оценен.
Как скрыть границу для указанных строк таблицы?
Ответ 1
Используйте границу свойства CSS на <td>
, следуя <tr>
, вы не хотите иметь границу.
В моем примере я сделал класс noBorder
, который я дал одному <tr>
. Затем я использую простой селектор tr.noBorder td
, чтобы сделать границу для всех <td>
, находящихся внутри <tr>
, с классом noBorder
, назначив border: 0
.
Обратите внимание, что вам не нужно предоставлять устройство (т.е. px
), если вы установите что-то в 0
, поскольку это не имеет значения. Нуль равен нулю.
table, tr, td {
border: 3px solid red;
}
tr.noBorder td {
border: 0;
}
<table>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr class="noBorder">
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>A3</td>
<td>A3</td>
</tr>
</table>
Ответ 2
Я использую это с хорошими результатами:
border-style:hidden;
Он также работает для:
border-right-style:hidden; /*if you want to hide just a border on a cell*/
Пример:
<style type="text/css">
table, th, td {
border: 2px solid green;
}
tr.hide_right > td, td.hide_right{
border-right-style:hidden;
}
tr.hide_all > td, td.hide_all{
border-style:hidden;
}
}
</style>
<table>
<tr>
<td class="hide_right">11</td>
<td>12</td>
<td class="hide_all">13</td>
</tr>
<tr class="hide_right">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="hide_all">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
Ответ 3
Вы можете просто добавить эти строки кодов здесь, чтобы скрыть строку,
Либо вы можете написать border:0
или border-style:hidden;
border: none
, либо это произойдет то же самое
<style type="text/css">
table, th, td {
border: 1px solid;
}
tr.hide_all > td, td.hide_all{
border: 0;
}
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr class= hide_all>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
Ответ 4
Добавить программно класс noborder в определенную строку, чтобы скрыть его
<style>
.noborder
{
border:none;
}
</style>
<table>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
</tr>
/*no border for this row */
<tr class="noborder">
<td>content1</td>
<td>content2</td>
</tr>
</table>