无论内容如何，都要强制表格列的宽度始终保持固定。

8 浏览
0 Comments

无论内容如何，都要强制表格列的宽度始终保持固定。

我有一个带有table-layout: fixed属性和一个设置了宽度的

的HTML表格。即使文本内容中不包含空格，该列仍会扩展以容纳文本内容。除了将每个

的内容包装在一个

中，还有其他方法可以解决这个问题吗？\n示例：http://jsfiddle.net/6p9K3/29/\n


    
        

            Test
            Testing 1123455
        

            AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
            B
        

    


table
{
    table-layout: fixed;
}
td
{
    border: 1px solid green;
    overflow: hidden;
}

\n在这个示例中，可以看到尽管明确设置为50px宽度，但包含AAAAAAAAAAAA...的列仍会扩展。

0

3 答案

0 Comments

固定表格列宽的问题是由于HTML标签中的width属性被弃用所导致的。根据w3school的说法，width属性在HTML5中不再被支持，推荐使用CSS的width属性来设置列宽。为了解决这个问题，可以使用

和

元素来设置列宽，它们需要放在

标签之后、

、

或

元素之前。

在解决这个问题时，需要先确定表格的总宽度，然后使用一个“控制性”行，在这一行中的每个

元素都设置一个明确的宽度，这些宽度的总和应该等于

标签中设置的宽度。以下是一个示例：





  

    
    
    
  

  

    your stuff
    your stuff
    your stuff
  







这样可以保持表格的宽度为300像素。需要注意的是，如果表格中的图片超过了设置的宽度，可能会出现问题，所以需要注意图片的大小。

									
				

									

			
			
0

		
	

											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
问题出现的原因是Web浏览器默认情况下不会将单词断开换行，所以您所遇到的情况是浏览器的正常行为。但是，您可以使用word-wrap CSS指令来覆盖此行为。您需要在整个表格上设置一个宽度，然后在列上设置一个宽度。根据您的要求，"width:100%;"也可以正常工作。使用word-wrap可能不是您想要的，但它对于显示所有数据而不会破坏布局非常有用。结合Arie Shaw的答案，我得到了我想要的行为。无论文本内容如何，列的宽度始终相同，并且即使没有空格，文本也会换行。如果表格未设置为table-layout: fixed，则无法像这样工作。然而，如果表头的th具有colspan，那么table-layout fixed无法使用CSS进行样式化。您如何使word-wrap在表格中起作用？

									

				

									

			

			
0

		

	



											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
问题的原因：


默认情况下，HTML 表格的列宽度会根据内容的长度自适应调整，这可能导致表格的列宽不一致或者无法固定。


解决方法：


为了强制表格的列宽始终保持固定，可以使用 CSS 的 table-layout 属性，并将其设置为 fixed。同时，可以指定表格的宽度，以确保列宽固定。


以下是解决方法的代码示例：




table {
    table-layout: fixed;
    width: 100px;
}





这样设置后，表格的列宽度将始终保持固定，不会受到内容长度的影响。


参考链接：


- [jsFiddle 示例](http://jsfiddle.net/m7nfU/)


- [Stack Overflow 回答](https://stackoverflow.com/a/11810223/4513925)


如果不想裁剪内容，可以将表格单元格设置为可滚动的。详情可参考上述提供的 Stack Overflow 回答链接。

									

				

									

			

			
0

		

	



					
							

		

								




		
            

                                
                    

                                        
                    

                                        
                    

                                        
                    

                                        
设置固定宽度？