HTML表间距

Question

我正在尝试在网站上创建一系列统一的简单HTML表，这些表似乎决心决定自己的列间距，尽管它们的语法与其他语法完全相同。 它们中的一些间隔良好，而另一些在距离上却相距甚远。 如何将列宽固定为相同，以使它们看起来均匀？

这是8个表之一的示例：

<table class=”table4”>
  <tbody>
    <tr>
      <td><b>Qty</b></td>
      <td><b>Wire EDM</b></td>
    </tr>
    <tr>
      <td>1</td>
      <td>Mitsubishi FX 10</td>
    </tr>
  <tbody>
</table>

我尝试过“ cellspacing”无济于事。 我也多次删除并重新编写了代码，但它们没有更改就可以了。

我是HTML的新手，这也不是我的工作，我正在尝试重新编写别人的代码。 清晰完整的答案将不胜感激！

先感谢您。

Answer 1

使用CSS确定列间距，并更改与网站的“样式”或“界面”相关的任何内容。

如果您希望整个站点上的所有列都是统一的，则应使用如下所示的简单CSS规则：

td {
    width: 120px;
}

如果需要百分比，也可以这样做。 例如，如果表始终有4列，则可以执行以下操作：

td {
    width: 25%;
}

查看以下示例：

 table { border: 1px solid silver; width: 500px; } td { border: 1px solid silver; width: 25%; } 

 <table> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> <tr> <td>test 1</td> <td>test 1</td> <td>test 1</td> <td>test 1</td> </tr> </table> 

要将CSS添加到您的网站，在线上有很多资源可以帮助您入门： https ： //developer.mozilla.org/zh-CN/Learn/CSS/Using_CSS_in_a_web_page

Answer 2

表格将根据其内容确定其自己的列宽，因此，如果您希望不同的表格具有相同的比例，则必须告诉浏览器。

例如：

 table { border-collapse: collapse; border: 1px solid #ccc; margin:4px; } th, td {border: 1px solid #ccc;} table.uniform { width:300px; } table.uniform th:first-child { width:30%; } 

 <p>Some uneven tables:</p> <table class="table1"> <thead> <tr> <th>eg</th> <th>A Cell Heading</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Some content</td> </tr> </tbody> </table> <table class="table2"> <thead> <tr> <th><b>Qty</b></th> <th><b>Wire EDM</b></th> </tr> </thead> <tbody> <tr> <td>123456789</td> <td>Mitsubishi FX 10</td> </tr> </tbody> </table> <p>The same tables but with some widths defined:</p> <table class="uniform"> <thead> <tr> <th>eg</th> <th>A Cell Heading</th> </tr> </thead> <tbody> <tr> <td>123456789</td> <td>Some content</td> </tr> </tbody> </table> <table class="uniform"> <thead> <tr> <th><b>Qty</b></th> <th><b>Wire EDM</b></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mitsubishi FX 10</td> </tr> </tbody> </table> <p>Example with inline styling:</p> <table style="width:300px"> <thead> <tr> <th style="width:30%"><b>Qty</b></th> <th><b>Wire EDM</b></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mitsubishi FX 10</td> </tr> </tbody> </table>