📜  如何设置固定宽度<td>在一张桌子上?

📅  最后修改于: 2021-10-28 02:32:51             🧑  作者: Mango

在设计网页的过程中,对表格的需求是很正常的。 HTML 提供了

标签来构造表格并定义行和列,分别使用
标签。

默认情况下,表格中的行和列的尺寸由浏览器以适合内容的方式自动调整。但是,可能存在需要固定列宽的情况。有多种方法可以固定

标签的宽度。其中一些如下所述:

  • 使用宽度属性:
标签具有宽度属性来控制特定列的宽度。通过为该属性分配一个 0 到 100 之间的百分比数值(或者您可以使用像素格式)。我们可以将列宽限制为表格总宽度的百分比。 width 属性无效且已被拒绝,因此HTML5不再支持该属性。
html


    
        
          Set up fixed width for
        
        
        
  
        
    
    
        

         GeeksforGeeks         

                    
                                                                                                                                                                                                                                                                                                                                                                   
GfG CoursesDescription
                      DS and Algo Foundation                                            Master the basics of Data Structures                       and Algorithms to solve complex                        problems efficiently.                     
Placement 100                       This course will guide you for                        placement with theory,lecture videos,                       weekly assignments, contests and doubt                        assistance.                     
                      Amazon SDE Test Series                                            Test your skill & give the final                        touch to your preparation before                        applying for product based against                        like Amazon, Microsoft, etc.                     
        
    


html


    
        Set up fixed width for <td>
        
        
  
        
    
    
        

         GeeksforGeeks         

                    
                                                                                                                                                                                                                                                                                                                                                                         
GfG CoursesDescription
DS and Algo Foundation                        Master the basics of Data Structures                         and Algorithms to solve complex                         problems efficiently.                     
Placement 100                      Test your skill & give the final touch                      to your preparation before applying for                      product based against like Amazon,                       Microsoft, etc.                     
Amazon SDE Test Series                      Test your skill & give the final touch                       to your preparation before applying for                      product based gaints like Amazon,                       Microsoft, etc.                     
        
    


html


    
        Set up fixed width for
        
        
  
        
    
    
        

         GeeksforGeeks         

                    
                                                                                                                                                                                                                                                                                                                                                                                                                                       
GfG CoursesDescription
DS and Algo Foundation                       Master the basics of Data Structures                       and Algorithms to solve complex                        problems efficiently.                     
Placement 100                       This course will guide you for                        placement with theory,lecture                        videos, weekly assignments,                       contests and doubt assistance.                     
Amazon SDE Test Series                      Test your skill & give the final touch                      to your preparation before applying for                      product based against like Amazon,                       Microsoft, etc.                     
        
    


  • 使用 CSS:层叠样式表 (CSS) 被广泛用于装饰大尺寸的网页。通过使用 CSS,HTML 元素的样式很容易修改。为了固定 td标签的宽度,第 n 个子 CSS 用于设置 table 每一行中特定列的属性(由 n 的值确定)。

html



    
        Set up fixed width for <td>
        
        
  
        
    
    
        

         GeeksforGeeks         

                    
                                                                                                                                                                                                                                                                                                                                                                         
GfG CoursesDescription
DS and Algo Foundation                        Master the basics of Data Structures                         and Algorithms to solve complex                         problems efficiently.                     
Placement 100                      Test your skill & give the final touch                      to your preparation before applying for                      product based against like Amazon,                       Microsoft, etc.                     
Amazon SDE Test Series                      Test your skill & give the final touch                       to your preparation before applying for                      product based gaints like Amazon,                       Microsoft, etc.                     
        
    
  • 使用 col 标签并固定表格布局属性:如果在表格的每一行中都遵循相同类型的列属性,那么使用col标签来定义列的属性是一个好主意。如果第一次在 HTML 文档中写入 col标签并设置了它的属性,则这些 all 属性指的是表中每行的第一列,其中提到了它。同样,第二次使用 col标签并定义其属性会影响表格每行的第二列。此外,调整列内的长文本CSS 属性table-layout:fixed;使用。下面是实现。

html



    
        Set up fixed width for
        
        
  
        
    
    
        

         GeeksforGeeks         

                    
                                                                                                                                                                                                                                                                                                                                                                                                                                       
GfG CoursesDescription
DS and Algo Foundation                       Master the basics of Data Structures                       and Algorithms to solve complex                        problems efficiently.                     
Placement 100                       This course will guide you for                        placement with theory,lecture                        videos, weekly assignments,                       contests and doubt assistance.                     
Amazon SDE Test Series                      Test your skill & give the final touch                      to your preparation before applying for                      product based against like Amazon,                       Microsoft, etc.                     
        
    
  • 输出:每种方法的输出都相同。

具有固定列宽的表格图像,第一列宽度为 40%,第二列宽度为 60%

HTML 是网页的基础,用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。

CSS 是网页的基础,用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。