Html 使表格单元格更宽的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13463557/
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
Best way to make table cell wider
提问by user584583
I am trying to figure out how to make the last field (Notes) wider. Currently the field says "We the people of the United States" as a place holder. I don't want each row to grow more vertically when the note field has more text in it.
我想弄清楚如何使最后一个字段（注释）更宽。目前，该字段显示“我们美国人民”作为占位符。当注释字段中有更多文本时，我不希望每一行垂直增长。
<tr>
<td><a href="http://acme.com/pkg_testme.edit_item?p_item_id=1126" align="Right">RS-11</a> </td>
<td width="300">a description</td>
<td width="200">INSTRUMENT CO</td>
<td width="40">28</td>
<td width="40">2.85</td>
<td width="40">15-OCT-12</td>
<td width="40">Euro</td>
<td width="200">spring scissor</td>
<td width="40">9</td>
<td width="40">2</td>
<td width="40">9</td>
<td width="40">1</td>
<td width="40">2</td>
<td width="40">1</td>
<td width="40">5</td>
<td width="40">9</td>
<td><a href="http://acme.com/pkg_testme2.edit_item?p_item_id=" align="Right"></a></td>
<td><a href="http://acme.com/pkg_testme.edit_notes? p_item_id=We%20the%20people%20of%20the%20United%20States">We the people of the United States</a></td>
</tr>
采纳答案by user584583
This is the solution I used
这是我使用的解决方案
<TD><div style="overflow: auto; height: 60px; width: 200px;">We the people of the United</div></TD>
回答by Madara's Ghost
First, don't use the width=attribute on HTML elements. CSS should be used for design.
首先，不要width=在 HTML 元素上使用该属性。CSS 应该用于设计。
Second, let the browser decide how to space out the table given the total width constraints. They usually do a pretty good job.
其次，在给定总宽度限制的情况下，让浏览器决定如何将表格隔开。他们通常做得很好。
回答by Chico3001
You should use the css :nth-child() selector to better style your tables:
你应该使用 css :nth-child() 选择器来更好地设计你的表格：
http://www.w3schools.com/cssref/sel_nth-child.asp
http://www.w3schools.com/cssref/sel_nth-child.asp
https://css-tricks.com/almanac/selectors/n/nth-child/
https://css-tricks.com/almanac/selectors/n/nth-child/
HTML CODE:
HTML代码：
<tr class="tableformat">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
CSS CODE:
代码：
.tableformat td:nth-child(1){
width: 300px;
}
.tableformat td:nth-child(2){
width: 200px;
}
.tableformat td:nth-child(3){
color: red;
}
And so on...
等等...
回答by Damien Overeem
Set the styles with ie. <td style="width: 40px;">..</td>
使用 ie 设置样式。 <td style="width: 40px;">..</td>
And if you want absolute control.. add <table style="table-layout:fixed">...</table>. That will stop the browser entirely from messing with your widths.
如果你想要绝对控制......添加<table style="table-layout:fixed">...</table>. 这将完全阻止浏览器弄乱您的宽度。
Ofcourse styles should be in seperate css files and what not, but learn that somewhere else )
当然样式应该在单独的 css 文件中，什么不是，但在其他地方学习）
