Question

我有一个包含以下类的表： -

.multicolor {
 border: 1px solid #000000;
}

并且对于一个特定的表行，我想删除左右边框，用顶部和底部替换它们，使得它看起来像一个表正在结束而另一个表正在开始。这是我尝试的方式，没有任何运气。

<tr style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
                    <td colspan="7" style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
<br></td>
                    </tr>

顶部和底部边框出现但旁边边框仍然存在。有没有人知道是否有办法覆盖该行的继承边界属性？

Answer 1

你必须设置你的td的边界或“无”; 可能会有所帮助hide cells border using css

Answer 2

试试这个。

  table {
       border-collapse:collapse;
    }

    td {
        border:none;
    }

Answer 3

你好请参阅下面的小提琴，因为你提到合并行我为边框和行中没有边框做了这个.hope它有帮助

<table>
<thead>
<tr>
  <th class="col1">1</th>
  <th class="col2">2</th>
  <th class="col3">3</th>
 </tr>
 </thead>
 <tr class="first">
<td>asdas</td>  
<td>asdas</td>
 <td >boooo</td>
</tr>
 <tr class="second">
 <td>asdas</td>   
 <td>asdas</td>
 <td>asdas</td>
 </tr>
</table>

见下面的小提琴 fiddle demo

Answer 4

试试这个，工作正常

<style>
 .border {
   border:solid 1px #000;
 }
.border-head {
 border-bottom:solid 1px #000;
 }
</style>

<table width="300" border="0" cellpadding="0" cellspacing="0" class="border" >
<thead>
 <tr>
  <td class="border-head">&nbsp;</td>
  <td class="border-head">&nbsp;</td>
  <td class="border-head" >&nbsp;</td>
 </tr>
</thead>
<tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

如何删除单行上的表格边框？

4 个答案: