Question

我不知道这是否可行，但是......我正在尝试使用css格式化表格，以获得特定的外观。这是一个wordpress网站，将由我的客户更新。问题是她将使用特定格式复制/粘贴表格，并且我希望表格具有该格式而无需她做任何额外的工作。这就是我到目前为止所拥有的。

我希望带有粗体文本的单元格没有虚线。现在我正在形成tr行来添加这样的虚线：

HTML

<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong></td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong></td>
</tr>
.....

CSS

.dotted tr:nth-child(even) {
  text-decoration: none;
  border-bottom: 1px white dotted;
}
.dotted tr:nth-child(odd) {
  text-decoration: none;
  border-bottom: 1px white dotted;
}

有没有办法可以做到这一点，而不必为每个都有粗体文字的人添加自定义类标签？

这就是我希望它看起来的样子，但这一切都是手动完成的......这就是我想要避免的。

ps：有时表格可能包含超过1个数据＆＃39;在大胆的字母下，所以当它涉及到标题时，它并不总是奇数，甚至是线条。并且＆＃39;播放＆＃39;吼叫他们。（这是音乐剧的网站）

-Thanks

Answer 1

@Manoj Kumar是的，大胆的项目总是在colspan 2下

既然您已经说明了上述评论，那么我就有一个CSS hack。

将您的CSS更改为仅在td而非tr元素上使用虚线边框。
使用带有属性选择器的colspan=2定位元素，使其没有边框。

＆＃13;

table {
  background: gray;
}
.dotted td:nth-child(even) {
  text-decoration: none;
  border-bottom: 1px white dotted;
}
.dotted td:nth-child(odd) {
  text-decoration: none;
  border-bottom: 1px white dotted;
}
.dotted td[colspan="2"] { /* Attribute selector */
  border: 0 none;
}

＆＃13;

<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td colspan="2"><strong>Argento</strong>
      </td>
    </tr>
    <tr>
      <td>Cake Box Lady</td>
      <td style="text-align: right;">Postcard from Morocco</td>
    </tr>
    <tr>
      <td colspan="2"><strong>Bellini</strong>
      </td>
    </tr>
    <tr>
      <td colspan="2"><strong>Argento</strong>
      </td>
    </tr>
    <tr>
      <td>Cake Box Lady</td>
      <td style="text-align: right;">Postcard from Morocco</td>
    </tr>
    <tr>
      <td colspan="2"><strong>Bellini</strong>
      </td>
    </tr>
    <tr>
      <td colspan="2"><strong>Argento</strong>
      </td>
    </tr>
    <tr>
      <td>Cake Box Lady</td>
      <td style="text-align: right;">Postcard from Morocco</td>
    </tr>
    <tr>
      <td colspan="2"><strong>Bellini</strong>
      </td>
    </tr>
    <tr>
      <td colspan="2"><strong>Argento</strong>
      </td>
    </tr>
    <tr>
      <td>Cake Box Lady</td>
      <td style="text-align: right;">Postcard from Morocco</td>
    </tr>
    <tr>
      <td>Cake Box Lady</td>
      <td style="text-align: right;">Postcard from Morocco</td>
    </tr>
    <tr>
      <td>Cake Box Lady</td>
      <td style="text-align: right;">Postcard from Morocco</td>
    </tr>
    <tr>
      <td colspan="2"><strong>Bellini</strong>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

自定义css格式化tr td但不在td内检测到粗体

1 个答案: