设置td的宽度在此表中不起作用

Question

这是我的HTML代码，

      <table cellspacing="0" id="ext_invited_table">
                <tbody id="ext_invited_table_body">
                    <tr>
                        <td>
                        <input type="checkbox" class="internal_case">
                        </td>
                        <td class="attendee_id" style="display:none;">0</td>
                        <td >Non</td>
                        <td style="display:none;">add_ext_invited_tableadd_ext_invited_tableadd_ext_invited_tableadd_ext_invited_table</td>
                        <td style="display:none;">add_ext_invited_tableadd_ext_invited_tableadd_ext_invited_table</td>
                        <td>add_ext_invited_tableadd_ext_invited_tableadd_ext_invited_table, add_ext_invited_tableadd_ext_invited_tableadd_ext_invited_tableadd_ext_invited_table</td><td>a@a.com</td>
                        <td></td>
                        <td>
                        <input type="button" id="invited_delete_btn">
                        </td>
                        <td style="display:none;">Asia/Tehran</td>
                    </tr>
                </tbody>
            </table>

这是我的css，

td{
    border: 1px solid black;
    width: 100px;
}

DEMO

在这里，我想设置td的宽度，但它不起作用。

请问有什么问题吗？

Answer 1

如果您希望每个<td>具有相同的宽度，那么您需要添加一些CSS来打破长词：

word-break:break-all;

您可能想要添加

vertical-align:top

同样，要将文字与<td>

的顶部对齐

Example Fiddle

Answer 2

td{
    border: 1px solid black;
    width: 100px;
    max-width: 100px; /* Prevents Text from expanding the td */
    overflow: hidden; /* Hides the extra stuff after the end of the td */
}

Answer 3

在html文档中删除style = display：none of yours td。 Css首先寻找页面。