Question

我有一个HTML表格问题，我想更好地理解。

我们假设我有一个3行HTML

<table>
    <tr>
        <td style="text-align:right;">A1</td>
        <td>A2</td>
    </tr>
    <tr>
        <td style="text-align:right;">B1</td>
        <td>B2</td>
    </tr>
    <tr>
        <td colspan="2">A very loooooooong string here</td>
    </tr>
</table>

使用非常长的文本时，前两行中的内容看起来就像它们几乎居中一样。但是，如果我将整个“非常长的字符串”<td>移动到行内的单独<table>中，我会看到其他内容不居中。当<td>内容在另一个表格内时，为什么显示会有所不同？

Answer 1

如果您的问题最终得到2个表格，原文如下：

<table>
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
</table>

将looooong文本转化为自己的文字：

<table>
 <tr>
  <td colspan="2">A very loooooooong string here</td>
 </tr>
</table>

然后，第一个表格的前两行不再看起来像它们居中的原因是因为如果您相对于第二个表格进行比较，它们不是 - 仅。

如果在TABLE属性中使用border="1"进行调试，您将看到它们包含的表折叠到最宽的表数据单元格。因此，即使它们仍然存在，它们看起来并不像中心。

向第一个表添加一些任意宽度，您将看到它们仍然居中。

Answer 2

你能提供你的第二个例子吗？当我创建以下内容时，它看起来仍然相同。您有可能没有将表格正确嵌入表格单元格中，并且colspan为2。

<table border="1">
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
 <tr>
  <td colspan="2">
    <table border="1"><tr>
        <td>A very loooooooong string here</td>
    </tr></table>
  </td>
 </tr>
</table>

Answer 3

在解释HTML问题时，最好指出哪些浏览器用于测试...
无论如何，我用FF3和IE6进行了快速测试，我没有看到你描述的行为：对于嵌套表，长字符串有更多的填充但其他内容仍然在视觉上居中。
你应该展示你的其他代码。我的是：

<table>
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
 <tr>
  <td colspan="2"><table><tr><td>A very loooooooong string here</td></tr></table></td>
 </tr>
</table>

Answer 4

我想我知道你的意思，问题的第二部分是基于：

<table>
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
 <tr>
  <table><td colspan="2">A very loooooooong string here</td></table>
 </tr>
</table>

然后我猜表格内容呈左对齐的原因是内表标签隐藏了外表的colspan。

答案是停止使用html来设置表格样式并改为使用CSS！

HTML表格问题

4 个答案: