Question

我知道这听起来很简单，但是我的表类在它之间有一个空格，它似乎不允许我使用css修改样式。

我的html表格如下：

<table class="shop_table order_details" style="width: 100%;">
  <thead>
    <tr>
      <th style="text-align:left;width: 20%;"><strong>Product</strong></th>
      <th style="text-align:left;width: 80%;"><strong>Digital Codes</strong></th>
      <td><button class="btn btn-copy-code" data-clipboard-action="copy" data-clipboard-target="#group-1" style="display: none;"><span class="text-code">Copy Code</span></button></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align:left;width: 20%;">Xbox $5 Code</td>
      <td style="text-align:left;width: 80%;"><span class="lic-key" id="group-2">BBBB-CCCC-AAAV</span><br></td>
      <td><button class="btn btn-copy-code" data-clipboard-action="copy" data-clipboard-target="#group-2"><span class="text-code">Copy Code</span></button></td>
    </tr>
  </tbody>
</table>

我想修改其中包含BBBB-CCCC-AAAV的td以添加底部边框。

我要插入的css如下：

table.shop_table order_details td {
    border: 1px solid #d6d6d6;
    text-align: center;
    font-size: 14px;
    padding: 10px 8px;  
}

而不是上面的代码，我需要它才能用于具有（BBBB-CCCC-AAAV）和第二个显示（复制代码）的2 td。

我想更改这些2的原因是因为没有为这些设置边框。

请看这张图片：image here

Answer 1

试试这个：

＆＃13;

td:nth-child(2) {
  border: 1px solid #d6d6d6;
  text-align: center;
  font-size: 14px;
  padding: 10px 8px;
}

＆＃13;

<table class="shop_table order_details" style="width: 100%;">
  <thead>
    <tr>
      <th style="text-align:left;width: 20%;"><strong>Product</strong></th>
      <th style="text-align:left;width: 80%;"><strong>Digital Codes</strong></th>
      <td><button class="btn btn-copy-code" data-clipboard-action="copy" data-clipboard-target="#group-1" style="display: none;"><span class="text-code">Copy Code</span></button></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align:left;width: 20%;">Xbox $5 Code</td>
      <td style="text-align:left;width: 80%;"><span class="lic-key" id="group-2">BBBB-CCCC-AAAV</span><br></td>
      <td><button class="btn btn-copy-code" data-clipboard-action="copy" data-clipboard-target="#group-2"><span class="text-code">Copy Code</span></button></td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

查看您的示例图片，您实际上希望它围绕整个表格。只需直接使用CSS定位表格。

table {
  outline: thin solid;
  background: #d3d3d3;
}

<table class="shop_table order_details" style="width: 100%;">
  <thead>
    <tr>
      <th style="text-align:left;width: 20%;"><strong>Product</strong></th>
      <th style="text-align:left;width: 80%;"><strong>Digital Codes</strong></th>
      <td><button class="btn btn-copy-code" data-clipboard-action="copy" data-clipboard-target="#group-1" style="display: none;"><span class="text-code">Copy Code</span></button></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align:left;width: 20%;">Xbox $5 Code</td>
      <td style="text-align:left;width: 80%;"><span class="lic-key" id="group-2">BBBB-CCCC-AAAV</span><br></td>
      <td><button class="btn btn-copy-code" data-clipboard-action="copy" data-clipboard-target="#group-2"><span class="text-code">Copy Code</span></button></td>
    </tr>
  </tbody>
</table>

调整CSS属性以满足您的需求。

Answer 3

这是我的小解决方案：




<table class="shop_table order_details" style="width: 100%;">
<thead>
<tr>
<th style="text-align:left;width: 20%;"><strong>Product</strong></th>
<th style="text-align:left;width: 80%;"><strong>Digital Codes</strong></th>
<td><button class="btn btn-copy-code" data-clipboard-action="copy" data-clipboard-target="#group-1" style="display: none;"><span class="text-code">Copy Code</span></button></td></tr>
</thead>
<tbody><tr><td style="text-align:left;width: 20%;">Xbox $5 Code</td><td style="text-align:left;width: 80%;" class="myCSS" ><span class="lic-key" id="group-2"  >BBBB-CCCC-AAAV</span><br></td><td><button class="btn btn-copy-code" data-clipboard-action="copy" data-clipboard-target="#group-2"><span class="text-code">Copy Code</span></button></td></tr></tbody></table>

这应该是你的CSS

#myCSS{
border: 1px solid #d6d6d6;
text-align: center;
font-size: 14px;
padding: 10px 8px; 
}

在[css]中设置表格的td样式

3 个答案: