Question

我刚开始用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>

我希望我的桌子开始隐藏。为此，我使用：

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块中，或者放在从link元素引用的单独样式表中。
如果您希望隐藏某些内容，而不是使用JavaScript隐藏元素，请将display: none的CSS规则应用于其关联的类。一旦加载并且您已经完成了任何希望的处理，您就可以使用JavaScript将表的类添加或更改为您希望显示的内容。

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

Answer 2

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

CSS在页面加载时呈现，因为表格在页面加载时不显示，可能无法将样式应用于文本的中心。

您可能希望在同一个单击中将中心类添加到表中，导致表格显示在页面上。这可能是你的问题，如果这不起作用，请提供一个很好的例子，如果可能或jsfiddle。

HTML表格中的中心文本

2 个答案: