javascript - HTML 表格中的居中文本

Question

我刚开始用 HTML 编程，但似乎做不对。我想将文本放在表格的中心，虽然我已经设法用一个简单的 HTML 页面做到了，但是当我想把事情提升到一个新的水平时会出现一些问题(考虑到我对 HTML 的一点经验仍然很低)。

这是我的 table :

<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>

我希望我的 table 开始隐藏。为此，我使用:

document.getElementById("Passo1").style.display="none";

“centra_crl”类是:

.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.";
}

th 和 td 都出现在正确的位置。当我显示它时，center 属性似乎没有对表格执行任何操作。

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

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

谢谢!

Answer 1

基本问题是 td 元素只占用它们必须占用的宽度。换句话说，在没有其他表格内容或样式说明的情况下，您的 td 只会与其包含的内容一样宽。

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

• 如评论中所述，不要使用表格进行布局；改为使用 CSS。如果您实际上要显示表格数据，那就去做吧，但您的代码示例看起来更像是布局而不是数据。
• font 标签已经弃用一段时间了。使用 CSS 控制文档呈现的所有方面，包括字体系列、大小、粗细、颜色等。
• 使用内联样式通常是一种不好的做法，因为管理这些样式并用别处的其他规则覆盖它们要困难得多。尝试将所有样式集中在文档标题中的 style block 中，或者集中在您从 link 元素引用的单独样式表中。
• 与其使用 JavaScript 来隐藏元素，如果您希望某些东西一开始就隐藏起来，请将 display: none 的 CSS 规则应用于其关联类。载入并完成所需的任何处理后，您可以使用 JavaScript 将表格的类添加或更改为按您希望的方式显示的内容。

总而言之，您需要花一些时间学习 HTML 和 CSS，然后再深入学习。如果您现在不花时间学习正确的方法，此示例中有很多错误稍后会再次困扰您。