样式 CSS 表 td
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6486237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style CSS table td
提问by user780483
My site allows users to generate tables with PHP. The number of rows and cells is variable but the number of columns is always fixed. The table usually generates two digit numbers. When the table generates three digit numbers the entire table expands to accommodate this and the size of the table increases, ruining my layout. Is there a way to use CSS and style this table's tds so that the table doesn't change size when 3 digit numbers are generated. (3 digits are the longest). I tried adding padding to the table, but its not working.
我的网站允许用户使用 PHP 生成表格。行数和单元格数是可变的，但列数始终是固定的。该表通常生成两位数。当表格生成三位数字时，整个表格会扩展以容纳这个数字，表格的大小也会增加，从而破坏了我的布局。有没有办法使用 CSS 并设置此表格的 tds 样式，以便在生成 3 位数字时表格不会改变大小。（最长 3 位数）。我尝试在表格中添加填充，但它不起作用。
Also, should I use an id in table or class?
另外，我应该在表或类中使用 id 吗？
回答by jpm
td {
width: 50px;
}
I think something like that might work for you. Obviously, you can adjust the actual width to your needs.
我认为这样的事情可能对你有用。显然，您可以根据需要调整实际宽度。
And if you multiple table and only want to fix one, give the one in question an id:
如果你有多个表并且只想修复一个，给有问题的一个 id：
<table id="fixed_table">
<table id="fixed_table">
and then in the css, you could say:
然后在 css 中，你可以说：
#fixed_table td {
width: 50px;
}
and it would only affect tds in that particular table. Of course, if you wanted to affect some tables but not others, you would use a class instead of an id.
它只会影响该特定表中的 tds。当然，如果您想影响某些表而不影响其他表，则可以使用类而不是 id。
回答by David says reinstate Monica
You could use a combination of widthand max-width:
你可以使用的组合width和max-width：
td {
border: 1px solid #ccc;
width: 2em; /* or whatever... */
max-width: 2em; /* or whatever... */
height: 2em; /* or whatever... */
line-height: 2em; /* or whatever... */
text-align: center; /* a personal aesthetic choice... */
overflow: hidden; /* to prevent overflow... */
}
(Please notethat while I use jQuery in the demo, that's only to generate contents and isn't necessary for the demo to work.)
（请注意，虽然我在演示中使用了 jQuery，但那只是为了生成内容，并不是演示工作所必需的。）
回答by joakimdahlstrom
Set fixed widths on the columns.
在列上设置固定宽度。
