如何使用CSS摆脱底部边框(How to get rid of th bottom border using css)

编程入门行业动态更新时间:2024-10-09 09:13:51

有没有办法让表列第二列看起来像第一列，同时保留th标签。分开两者的线仍然必须在那里。

我到目前为止的代码：

.noborders th {
  border-bottom: 0;
}

table {
  border-collapse: collapse
}

#test {
  border-collapse: collapse;
  border: 0;
} 
  <body>
  <table cellpadding="0" cellspacing="0" width="100%" border="1">
    <th id="test"><b>One</b></th>
    <th><b>Two</b></th>
    <tr>
      <td id="test"></td>
      <td></td>
    </tr>
</body> 
  
 
 
 我希望它看起来像什么  
   
 它看起来像什么  
  
Is there a way to make the table column two look like column one while keeping the th tag. The line separating the two still has to be there. 
The code I got so far:  
 
 
  
  .noborders th {
  border-bottom: 0;
}

table {
  border-collapse: collapse
}

#test {
  border-collapse: collapse;
  border: 0;
} 
  <body>
  <table cellpadding="0" cellspacing="0" width="100%" border="1">
    <th id="test"><b>One</b></th>
    <th><b>Two</b></th>
    <tr>
      <td id="test"></td>
      <td></td>
    </tr>
</body> 
  
 
 
What I want it to look like 
 
What it looks like 

                最满意答案
                
                    
                         首先，将你的<th>放在<tr>里面......  
 使用class而不是id （id应该是唯一的）  
 只需设置border:0到所有td ，然后将border-right应用于.test  
 
 
  
  th,
td {
  border: 0;
}

td {
  padding: 20px;
}

table {
  border-collapse: collapse
}

.test {
  border-collapse: collapse;
  border-right: 1px solid;
} 
  <table cellpadding="0" cellspacing="0" width="100%" border="1">
  <tr>
    <th class="test"><b>One</b></th>
    <th><b>Two</b></th>
  </tr>
  <tr>
    <td class="test"></td>
    <td></td>
  </tr>
</table> 
  
 
First, place your <th> inside <tr>... 
Use class instead of id(id should be unique) 
Just set border:0 to all td, th and apply border-right to .test 
 
 
  
  th,
td {
  border: 0;
}

td {
  padding: 20px;
}

table {
  border-collapse: collapse
}

.test {
  border-collapse: collapse;
  border-right: 1px solid;
} 
  <table cellpadding="0" cellspacing="0" width="100%" border="1">
  <tr>
    <th class="test"><b>One</b></th>
    <th><b>Two</b></th>
  </tr>
  <tr>
    <td class="test"></td>
    <td></td>
  </tr>
</table>