blocks|key|875910|text|您可以尝试对所有行使用<col>标记管理表样式，但需要在<table>或tables+css类上设置table-layout:fixed样式，并为单元格设置overflow样式|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|875911|http://www.w3schools.com/TAGS/tag_col.asp|875912|<table+class="fixed">
++++<col+width="20px"+/>
++++<col+width="30px"+/>
++++<col+width="40px"+/>
++++<tr>
++++++++<td>text</td>
++++++++<td>text</td>
++++++++<td>text</td>
++++</tr>
</table>|code-block|syntax|javascript|875913|这是你的CSS|875914|table.fixed+{+table-layout:fixed;+}
table.fixed+td+{+overflow:+hidden;+}|875915|entityMap|0|LINK|mutability|MUTABLE|url^0|B|5|S|7|1E|I|26|8|0|0|15|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|G]]]]

<p>You could try using the <code>&lt;col&gt;</code> tag manage table styling for all rows but you will need to set the <code>table-layout:fixed</code> style on the <code>&lt;table&gt;</code> or the tables css class and set the <code>overflow</code> style for the cells</p>
<p><a href="http://www.w3schools.com/TAGS/tag_col.asp" rel="noreferrer">http://www.w3schools.com/TAGS/tag_col.asp</a></p>
<pre><code>&lt;table class=&quot;fixed&quot;&gt;
    &lt;col width=&quot;20px&quot; /&gt;
    &lt;col width=&quot;30px&quot; /&gt;
    &lt;col width=&quot;40px&quot; /&gt;
    &lt;tr&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
        &lt;td&gt;text&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>
<p>and this be your CSS</p>
<pre><code>table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
</code></pre>


blocks|key|1090550|text|table+td+
{
++table-layout:fixed;
++width:20px;
++overflow:hidden;
++word-wrap:break-word;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1090551|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}
</code></pre>


blocks|key|875929|text|table+{+
++++table-layout:fixed;+width:200px;
}
table+tr+{
++++height:+20px;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|875930|10x10|unstyled|875931|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}
</code></pre>

<p>10x10</p>


blocks|key|1090655|text|现在在HTML5/CSS3中，我们有更好的解决方案。在我看来，推荐使用这个纯粹的CSS解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1090656|​|1090657|table.fixed+{table-layout:fixed;+width:90px;}/*Setting+the+table+width+is+important!*/
table.fixed+td+{overflow:hidden;}/*Hide+text+outside+the+cell.*/
table.fixed+td:nth-of-type(1)+{width:20px;}/*Setting+the+width+of+column+1.*/
table.fixed+td:nth-of-type(2)+{width:30px;}/*Setting+the+width+of+column+2.*/
table.fixed+td:nth-of-type(3)+{width:40px;}/*Setting+the+width+of+column+3.*/|code-block|syntax|javascript|1090658|<table+class="fixed">
++++<tr>
++++++++<td>Veryverylongtext</td>
++++++++<td>Actuallythistextismuchlongeeeeeer</td>
++++++++<td>We+should+use+spaces+tooooooooooooo</td>
++++</tr>
</table>|1090659|1090660|即使在haunter's+solution中，也需要设置表的width。否则它就不能工作。|offset|length|style|CODE|1090661|vsync建议的另一个新的CSS3特性是：word-break:break-all;。这也会将没有空格的单词分成多行。只需像这样修改代码：|1090662|table.fixed+{+table-layout:fixed;+width:90px;+word-break:break-all;}|1090663|最终结果|1090664|1090665|📷|atomic|1090666|1090667|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/4185874|1|https://stackoverflow.com/users/104380/vsync|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/b097265e42d51281486d07477721853a.png|imageAlt^0|0|0|0|0|0|U|5|3|I|0|0|L|L|0|5|1|0|0|0|0|0|1|2|0|0^^$0|@$1|2|3|4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1J|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|1L|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|1M|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1N|8|@$N|1O|O|1P|P|Q]]|9|@$N|1Q|O|1R|1|1S]]|A|$]]|$1|R|3|S|5|6|7|1T|8|@$N|1U|O|1V|P|Q]]|9|@$N|1W|O|1X|1|1Y]]|A|$]]|$1|T|3|U|5|F|7|1Z|8|@]|9|@]|A|$G|H]]|$1|V|3|W|5|6|7|20|8|@]|9|@]|A|$]]|$1|X|3|C|5|6|7|21|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|10|7|22|8|@]|9|@$N|23|O|24|1|25]]|A|$]]|$1|11|3|C|5|6|7|26|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|27|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]|1A|$5|15|16|17|A|$18|1B]]|1C|$5|1D|16|1E|A|$1F|1G|1H|-4]]]]

<p>Now in HTML5/CSS3 we have better solution for the problem. In my opinion this purely CSS solution is recommended:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="fixed"&gt;
    &lt;tr&gt;
        &lt;td&gt;Veryverylongtext&lt;/td&gt;
        &lt;td&gt;Actuallythistextismuchlongeeeeeer&lt;/td&gt;
        &lt;td&gt;We should use spaces tooooooooooooo&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>You need to set the table's <code>width</code> even in <a href="https://stackoverflow.com/a/4185874">haunter's solution</a>. Otherwise it doesn't work.<br>
Also a new CSS3 feature that <a href="https://stackoverflow.com/users/104380/vsync">vsync</a> suggested is: <code>word-break:break-all;</code>. This will break the words without spaces in them to multiple lines too. Just modify the code like this:</p>

<pre><code>table.fixed { table-layout:fixed; width:90px; word-break:break-all;}
</code></pre>

<h2>Final result</h2>

<p><img src="https://i.stack.imgur.com/JU8ZE.png" alt="Rendered table"></p>


blocks|key|876072|text|table
{
++table-layout:fixed;
}
td,th
{
++width:20px;+
++word-wrap:break-word;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|876073|：第一个孩子...：第n个孩子(1)或...|unstyled|876074|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}
</code></pre>

<p>:first-child ... :nth-child(1) or ...</p>


blocks|key|1090761|text|我有一个很长的表格td单元格，这迫使表格移动到浏览器的边缘，看起来很难看。我只希望该列的大小是固定的，并在它达到指定的宽度时拆分单词。所以这对我来说效果很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1090762|<td><div+style='width:+150px;'>Text+to+break+here</div></td>|code-block|syntax|javascript|1090763|您不需要为table、tr元素指定任何类型的样式。您也可以使用overflow:hidden；正如其他答案所建议的那样，但它会导致多余的文本消失。|1090764|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I had one long table td cell, this forced the table to the edges of the browser and looked ugly. I just wanted that column to be fixed size only and break the words when it reaches the specified width.
So this worked well for me:</p>

<pre><code>&lt;td&gt;&lt;div style='width: 150px;'&gt;Text to break here&lt;/div&gt;&lt;/td&gt;
</code></pre>

<p>You don't need to specify any kind of style to table, tr elements.
You may also use overflow:hidden; as suggested by other answers but it causes for the excess text to disappear.</p>


<p>A lot of people still use tables to layout controls, data etc. - one example of this is the popular jqGrid. However, there is some magic happening that I cant seem to fathom (its tables for crying out loud, how much magic could there possibly be?)</p>

<p>How is it possible to set a table's column width and have it obeyed like jqGrid does!? If I try to replicate this, even if I set every <code>&lt;td style='width: 20px'&gt;</code>, as soon as the content of one of those cells is greater than 20px, the cell expands!</p>

<p>Any ideas or insights?</p>


Fixed Table Cell Width

HTML5

很多人仍然使用表格来布局控件、数据等--其中一个例子就是流行的jqGrid。然而，有一些魔术发生了，我似乎无法理解(它的表格大声叫喊，有多少魔力可能存在？)如何才能像jqGrid那样设置一个表的列宽并遵守它呢？如果我尝试复制这个，即使我设置了每个<td style='width: 20px'>，只要其中一个单元格的内容...

问固定表格单元格宽度
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问固定表格单元格宽度EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问固定表格单元格宽度
EN