求助：WordPress Elementor中嵌入倒计时器的表格边框无法移除

问题背景 #

在WordPress网站通过Elementor嵌入每周三晚8:30自动重置的倒计时器时，表格边框始终无法完全移除，尝试了table{border:none;}等多种CSS属性及Elementor高级选项的自定义CSS均无效。

问题原因 #

Elementor或当前主题的默认表格CSS优先级高于自定义CSS，且原代码未针对<th>、<td>标签设置边框隐藏，导致边框残留。

解决步骤 #

1. 给表格添加自定义类名：在HTML的<table>标签中添加专属类，提升CSS选择器权重，避免被默认样式覆盖
2. 编写高优先级CSS：针对表格及内部的<th>、<td>标签统一设置边框隐藏
3. 重新嵌入代码：将修改后的代码通过Elementor的HTML小工具嵌入

修改后的完整代码 #

HTML代码 #

<div class="countdown-container">
  <table class="countdown-table" border="0" cellspacing="0">
    <tr>
      <th>
        <h1 id="days"></h1>
      </th>
      <th>
        <h1 id="hours"></h1>
      </th>
      <th>
        <h1 id="mins"></h1>
      </th>
      <th>
        <h1 id="secs"></h1>
      </th>
    </tr>
    <tr>
      <td>
        <h3 class="countdown-text">Days</h3>
      </td>
      <td>
        <h3 class="countdown-text">Hours</h3>
      </td>
      <td>
        <h3 class="countdown-text">Minutes</h3>
      </td>
      <td>
        <h3 class="countdown-text">Seconds</h3>
      </td>
    </tr>
  </table>
</div>

CSS代码 #

.countdown-container {
  text-align: center;
  color: white;
  background: black;
}

.countdown-table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border: none !important;
}

.countdown-table th,
.countdown-table td {
  width: 25%;
  border: none !important;
  padding: 0;
}

#days, #hours, #mins, #secs, .countdown-text {
  color: white;
}

JavaScript代码 #

var countDownDate = new Date("Jan 25, 2023 20:30:00").getTime();
var x = setInterval(countdown, 1000);

function countdown() {
  var now = new Date().getTime();
  var distance = countDownDate - now;

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.getElementById("days").innerHTML = days;
  document.getElementById("hours").innerHTML = hours;
  document.getElementById("mins").innerHTML = minutes;
  document.getElementById("secs").innerHTML = seconds;

  if (distance < 0) {
    resetCountdown();
  }
}

function resetCountdown() {
  clearInterval(x);
  var nextWednesday = new Date();
  nextWednesday.setDate(nextWednesday.getDate() + (3 + 7 - nextWednesday.getDay()) % 7);
  nextWednesday.setHours(20);
  nextWednesday.setMinutes(30);
  countDownDate = nextWednesday.getTime();
  x = setInterval(countdown, 1000);
}

额外说明 #

• 使用!important是为了确保自定义样式优先级高于Elementor/主题的默认样式，若不想使用!important，可以将.countdown-table替换为更具体的选择器（比如结合Elementor小工具的类，如.elementor-widget-html .countdown-table）
• 原代码中重复使用id="text"不符合HTML规范（ID必须唯一），已改为class="countdown-text"

内容的提问来源于stack exchange，提问作者Nik Thomas