как скрыть границу для указанных строк таблицы?

<p>я хочу скрыть границу для определенных строк таблицы. как это сделать?<br> любая идея?<br> пример кода высоко ценится.</p>

<p>используйте границу свойства css на <code><td></code>s, следующих за <code><tr></code>s, у которых вы не хотите иметь границу. </p><p>в моем примере я создал класс <code>noborder</code>, который я дал одному <code><tr></code>. затем я использую простой селектор <code>tr.noborder td</code>, чтобы убрать границу для всех <code><td></code>, которые находятся внутри <code><tr></code>s с классом <code>noborder</code>, назначив <code>border: 0</code>. </p><p>обратите внимание, что вам не нужно указывать единицу (т.е. <code>px</code>), если вы устанавливаете что-то на <code>0</code>, так как в любом случае это не имеет значения. ноль это просто ноль.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>table, tr, td { border: 3px solid red; } tr.noborder td { border: 0; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p><p>вот вывод в виде изображения:</p><p><img src="https://i.stack.imgur.com/axqar.png" alt="output from html"></p>

<p>я использую это с хорошими результатами:</p><pre><code>border-style:hidden; </code></pre><p>это также работает для:</p><pre><code>border-right-style:hidden; /*if you want to hide just a border on a cell*/ </code></pre><p>пример:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p><p>вот результат: <a href="https://i.stack.imgur.com/fzgly.png"> <img src="https://i.stack.imgur.com/fzgly.png" alt="enter image description here"> </a> </p>

<p>вы можете просто добавить эти строки кода здесь, чтобы скрыть строку,</p><p>либо вы можете написать <code>border:0</code> или <code>border-style:hidden;</code> <code>border: none</code>, либо произойдет то же самое</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><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  <tr class= hide_all> lois griffin $150</td> </tr> <tr> <td>joe</td> <td>swanson</td> <td>$300   cleveland brown $250</td> </tr> </table></code></pre> </div> </div> </p><p>запуск этих строк кода может легко решить проблему</p>

<p>добавьте программно класс noborder к определенной строке, чтобы скрыть его</p><pre><code><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> </code></pre>