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确定您的列间距，以及更改与＆＃34;样式＆＃34;相关的任何内容。或＆＃34;界面＆＃34;你的网站。

如果您希望整个网站上的所有列都是统一的，那么像下面这样的简单CSS规则应该为您完成：

td {
    width: 120px;
}

如果你想要百分比，你也可以这样做。例如，如果您的表总是有4列，您可以执行以下操作：

td {
    width: 25%;
}

查看以下示例：

＆＃13;

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

＆＃13;

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

＆＃13;

要向您的网站添加CSS，网上有许多资源可帮助您入门：https://developer.mozilla.org/en-US/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>

HTML表间距

2 个答案: