情况一：td 的宽度和小于 table 的宽度

/* 样式 */
table,
th,
td {
  border: 1px solid black;
  padding: 0;
}

.underline-text {
  text-decoration: underline;
}

示例1：

<p>
    <strong>示例1：</strong><br />
    Table 的宽度为 600px，Table 的 td 所有宽度总和不到 600px。<br />
    <span class="underline-text">
        这种情况浏览器会自动按照 td 的宽度的比例算出宽度。
    </span>
</p>
<table style="width: 600px;border-collapse: collapse;">
    <tr>
        <td style="width: 200px;">设置为200px</td>
        <td style="width: 200px;">设置为200px</td>
    </tr>
</table>

示例2：

<p>
    <strong>示例2：</strong><br />
    三个 td 的和小于 table 的宽度。<br />
    Table 的宽度为 600px，td1 为 250px，td2 为 250px，td3 为 50px。<br />
    <span class="underline-text">这种情况会按比例重新计算宽度。</span>
</p>
<table style="width: 600px;border-collapse: collapse;">
    <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 50px;">设置为 50px</td>
    </tr>
</table>

示例3：

<p>
    <strong>示例3：</strong><br />
    前两个 td 的宽度和小于 table 的宽度，第三个 td 不设置宽度。<br />
    Table 的宽度为 600px，td1 为 250px，td2 为 250px。<br />
    <span class="underline-text">
        这种情况下，前两个 td 的宽度不变，第三个 td 的宽度为剩余的宽度。
    </span>
</p>
<table style="width: 600px;border-collapse: collapse;">
    <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 250px;">设置为 250px</td>
        <td>不设置宽度</td>
    </tr>
</table>

示例4：

<p>
    <strong>示例4：</strong><br />
    前两个 td 的宽度和小于 table 的宽度，三个 td 的和小于 table的宽度。但添加了 table-layout: fixed;<br />
    Table 的宽度为 600px，td1 为 250px，td2 为 250px，td3 为 50px。<br />
    <span class="underline-text">
        这种情况下，结果和示例2一样。但是如果三个 td 的和大于 table的宽度，那么结果就如情况二的示例3所示。
    </span>
</p>
<table style="width: 600px;border-collapse: collapse;table-layout: fixed;">
    <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 50px;">设置为 50px</td>
    </tr>
</table>

情况二：td 的宽度和大于 table 的宽度

示例1：

<p>
    <strong>示例1：</strong><br />
    三个 td 的和大于 table 的宽度。<br />
    Table 的宽度为 600px，td1 为 250px，td2 为 250px，td3 为 200px。<br />
    <span class="underline-text">这种情况会按比例重新计算宽度。</span>
</p>
<table style="width: 600px;border-collapse: collapse;">
    <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 200px;">设置为 200px</td>
    </tr>
</table>

示例2：

<p>
    <strong>示例2：</strong><br />
    前两个 td 的宽度和大于 table 的宽度，第三个 td 不设置宽度。<br />
    Table 的宽度为 600px，td1 为 310px，td2 为 310px。<br />
    <span class="underline-text">
        这种情况下，会把最后一个 td 的宽度减掉后再按比例重新计算前两个 td 的宽度。
    </span>
</p>
<table style="width: 600px;border-collapse: collapse;">
    <tr>
        <td style="width: 310px;">设置为 310px</td>
        <td style="width: 310px;">设置为 310px</td>
        <td>不设置宽度</td>
    </tr>
</table>

示例3：

<p>
    <strong>示例3：</strong><br />
    三个 td 的和大于 table 的宽度。但添加了 table-layout: fixed;<br />
    Table 的宽度为 600px，td1 为 250px，td2 为 250px，td3 为 150px。<br />
    <span class="underline-text">这种情况下，每个 td 的宽度为设置的宽度，table的总宽度为三个 td 的总宽度（当然还包括边框）。
    </span>
</p>
<table style="width: 600px;border-collapse: collapse;table-layout: fixed;">
    <tr>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 250px;">设置为 250px</td>
        <td style="width: 150px;">设置为 150px</td>
    </tr>
</table>

参考文献：

[1] table td的宽度详解