Question

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

到目前为止我得到的代码：

＆＃13;

.noborders th {
  border-bottom: 0;
}

table {
  border-collapse: collapse
}

#test {
  border-collapse: collapse;
  border: 0;
}

＆＃13;

<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>

＆＃13;

我希望它看起来像什么

它看起来像什么

Answer 1

首先，将<th>放在<tr> ...

中

使用class代替id（ID应该是唯一的）

只需将border:0设置为所有td，th并将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>

Answer 2

这里有很多可怕的代码。首先，修复您的格式，对于两个，您错过了很多标记（关闭</body>，并<tr>包裹您的标题）。三，你甚至没有在桌子上用你的css引用的课程。第四，您不能拥有多个具有相同名称的ID。

<style>
  .noborders th {
    border-bottom:0;
  }

  table { 
    border-collapse:collapse
  }

  #test {
    border: 0;
  }
</style>

HTML

<body>
  <table class="noborders" cellpadding="0" cellspacing="0" width="100%" border="1"> 
    <tr>
      <th id="test"><b>One</b></th>
      <th><b>Two</b></th>
    </tr>
    <tr>
      <td id="test2"></td>
      <td></td> 
    </tr>
  </table>
</body>

Answer 3

有一个名为“rowspan”的th / td属性可以满足您的需求。

https://www.w3schools.com/tags/att_td_rowspan.asp

如何使用CSS摆脱底部边框

3 个答案: