Javascript 在HTML表格中居中显示文本

我刚刚开始用HTML编程，但似乎无法正确实现这一点。我想将文本集中在一个表中，尽管我已经用一个简单的HTML页面实现了这一点，但当我想将事情提升到下一个层次时，会出现一些问题（考虑到我对HTML的经验仍然很少）

这是我的桌子：

<table id="Passo1" style="border:5px solid rgba(0, 0, 0, 0.7);border-radius: 10px; background-color:rgba(0, 0, 0, 0.5); text-shadow:0.5px black; color: white" width="400px" class="send">
    <th colspan="20px"  class="centra_crl"><font size="20px"> Enviar relatório </font></th>
</tr>
<tr>
    <td class="centra_crl"> A enviar o relatório do carro para a sua oficina... </td>
</tr>
<tr></tr>
</table>

“centra_crl”类是：

如果在加载页面时不隐藏表，则一切正常。所有文本都放在中间。问题是，当我开始隐藏它，然后显示它时，文本似乎失去了“中心”属性，显示在左侧。还有，奇怪的是，如果我以后用这个替换文本

function sendReport2(){
           var el = document.getElementById('Passo1');
            el.rows[1].cells[0].innerHTML = "Concluído! Verifique no calendário a data da sua próxima visita.";
}

th和td都显示在正确的位置。 当我显示时，中心属性似乎对表没有任何作用

你们知道有什么问题吗？我怀疑这可能是一件非常愚蠢的事情，但我似乎无法理解

如果我没有写好这篇文章，我提前道歉。我不是这里的常客，总是对间隔感到困惑

---

谢谢

你在做什么来展示桌子？ 用户是否单击按钮来更改display:none属性

CSS是在页面加载时呈现的，因为页面加载时表格没有显示，所以它可能没有得到应用于文本居中的样式

---

您可能希望在使表格显示在页面上的同一次单击中将中心类添加到表格中。这可能是您的问题，如果这不起作用，请尽可能提供一个lave示例或一个JSFIDLE

基本问题是

td

元素只占它们必须占据的宽度。换句话说，在没有其他表格内容或样式说明的情况下，您的

td

只会与它包含的内容一样宽

您在某些地方使用CSS的想法是正确的，但您还需要解决一些问题：

• 如评论中所述，不要使用表格进行布局；改用CSS。如果您实际显示的是表格数据，那么就使用它，但您的代码示例看起来像布局而不是数据

• font

  标记已被弃用一段时间。使用CSS控制文档表示的所有方面，包括字体系列、大小、重量、颜色等
• 使用内联样式通常是不好的做法，因为在其他地方管理这些样式并用其他规则覆盖它们要困难得多。尝试将所有样式集中在文档标题中的

  样式

  块中，或集中在从

  链接

  元素引用的单独样式表中
• 如果您想隐藏某个元素，不要使用JavaScript来隐藏该元素，而是将

  display:none

  的CSS规则应用于其关联的类。一旦它被加载，并且您完成了您想要的任何处理，您就可以使用JavaScript添加或更改表的类，使其显示为您想要的内容

---

总而言之，在进一步学习HTML和CSS之前，您需要花费一些时间。如果你现在不花时间学习正确的方法，这个例子中有很多错误会在以后困扰你。

不要使用表格！！编辑：澄清：不要为此使用表格！！您应该避免使用内联样式

元素已弃用，请改用CSS。表格只能用于表格数据，不能用于表示目的。说明：不要在浏览器中使用表格来布局HTML文档。将它们用于表格数据是完全可以接受的。谢谢你的建议。我试图通过单击添加中心类来更改属性，但一切都保持不变。我想我会遵循几乎所有人的建议，不要使用表格我甚至不知道我为什么用桌子…：这真的只是为了布局。我会听从你的建议，把桌子搬走。谢谢你的详细回答！

.centra_crl{
  text-align: center;
}

function sendReport2(){
           var el = document.getElementById('Passo1');
            el.rows[1].cells[0].innerHTML = "Concluído! Verifique no calendário a data da sua próxima visita.";
}