Question

我有一个包含3列的表格。我想删除第一列和第二列之间的border / cellspacing，并使其显示为一列。

HTML

<table id="holdingsDistributionTable" class="table table-responsive">
  <tr>
    <th colspan="2">Currency</th>
    <th>Value</th>
  </tr>
  <tr>
    <td>
      <div class="currencyHolder greenCurrencyHolder">
        <div class="currency greenCurrency">
          AED
        </div>
      </div>
    </td>
    <td>
      <div style="text-align: center">
        UA Emirates Dirham
      </div>
    </td>
    <td>
      <b>345</b>
    </td>

  </tr>
  <tr>
    <td>
      <div class="currencyHolder blueCurrencyHolder">
        <div class="currency blueCurrency">
          ARS
        </div>
      </div>
    </td>
    <td>
      <div style="text-align: center">
        Argentine Peso
      </div>
    </td>
    <td>45345</td>

  </tr>
</table>

在上面的示例中，我想删除数据行中第1列和第2列之间的间距。

Answer 1

您可以通过以下方式删除整个表格的边框：

table {  
    border-collapse: collapse;
}

然后为行，表格标题和最后一个表格单元格（或使用:nth-child所需的任何表格单元格）添加边框：

tr, th, td:last-child  {
  border: 1px solid black;        /* changed to black to be more noticeable */
}

然后从表格标题和表格单元格中删除填充：

th, td {
    padding: 0;
}

以下是更新后的fiddle。

Answer 2

编辑：它是col而不是row，所以我相信这更像是这样：https://jsfiddle.net/o8x3ego0/6/ （相同的方法，但填充以在之间绘制孔） 你可以用

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body class=""> <script> function testDoodle() { var testParentEl = document.createElement('div'); var testChildEl = testParentEl.appendChild(document.createElement('div')); document.body.innerHTML+=('Has parent? ' + !!testChildEl.parentNode+'<br>'); console.log('Has parent? ' + !!testChildEl.parentNode); setTimeout(function() { document.body.innerHTML+=('Has parent? ' + !!testChildEl.parentNode+'<br>'); console.log('Has parent? ' + !!testChildEl.parentNode); }, 2000); return; } testDoodle(); </script> </body> </html>删除border-collapse并允许样式cellspacing tr

borders到line-height而不是th

在padding transparent border处绘制bottom th

并使用padding删除bg颜色，以仅模仿您想要的background-clip

＆＃13;

border-spacing

＆＃13;

body {
  background-color: white;
}
/* demo */

tr:nth-child(1) th {
  border-bottom: 3px solid transparent;
  background-clip: content-box
}
table {
  border-collapse: collapse;
}
/* end */

.table {
  margin-bottom: 20px;
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  border: 1px solid #ddd;
}
.currencyHolder {
  padding: 7px;
  border-radius: 5px;
  border-width: 2px;
  border-style: solid;
  margin-top: 10px;
  margin-bottom: 10px;
  max-width: 36px;
  text-align: center;
}
.currency {
  border-radius: 5px;
  color: white;
  font-size: 11px;
  font-weight: bold;
}
.greenCurrencyHolder {
  background-color: green;
  border-color: darkgreen;
}
.greenCurrency {
  background-color: darkgreen;
}
.blueCurrencyHolder {
  background-color: azure;
  border-color: cadetblue;
}
.blueCurrency {
  background-color: cadetblue;
}
#holdingsDistributionTable {
  display: table;
  /*width: 100% !important;*/
}
#holdingsDistributionTable th {
  background-color: #F4F5F6;
  color: #AAABAE;
  line-height: 2.5em;
  /* instead vertical  padding */
  width: 25%;
  font-weight: normal;
}
#holdingsDistributionTable th:last-child,
#holdingsDistributionTable td:last-child {
  background-color: #DFE1E3;
  color: #A19D9E;
}
#holdingsDistributionTable td:last-child {
  background-color: #DFE1E3;
  color: black;
}
#holdingsDistributionTable th,
#holdingsDistributionTable td {
  min-height: 15px;
  background-color: #F4F5F6;
}

＆＃13;

Answer 3

最好的解决方案是首先让你的表只有两列，不要使用colspan="2"然后通过在每列内联块中设置两个div来使风格化货币缩写与货币名称对齐CSS中使用display: inline-block;的项目

小提琴：https://jsfiddle.net/f30tujzn/

此解决方案不仅更容易移除部分边框，而且渲染速度更快，并且在较小的设备上响应更快。

HTML表格 - 从特定单元格中删除cellspacing / border

3 个答案: