How to set fixed width for <td> in a table ? Last Updated : 19 May, 2022 Comments Improve Suggest changes Like Article Like Report The requirement of a table is very normal in the process of designing a web page. HTML provides the <table> tag to construct the table and to define rows and columns <tr> and <td> tags respectively are used. By default, the dimensions of the rows and columns in a table are adjusted by the browser automatically in a way that fits the contents. However, there can be situations where the width of the columns are needed to be fixed. There are multiple ways to fix the width for <td> tag. Some of them are mentioned below: Using width attribute: The <td> tag has width attribute to control the width of a particular column. By assigning a numeric value to this attribute between 0 to 100 in terms of percentage(or you can use pixel format). We can restrict the column width up to that much percentage of the table's total width. The width attribute is invalid and has been disapproved, thus it is no longer supported by HTML5. HTML <!DOCTYPE html> <html> <head> <title> Set up fixed width for </title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h1 style="color: #00cc00;"> GeeksforGeeks </h1> <!-- Making the table responsive --> <div style="overflow-x: auto;"> <!-- Adding table in the web page --> <table width="50%"> <tr> <th>GfG Courses</th> <th>Description</th> </tr> <tr> <td width="40%"> DS and Algo Foundation </td> <td width="60%"> Master the basics of Data Structures and Algorithms to solve complex problems efficiently. </td> </tr> <tr> <td width="40%">Placement 100</td> <td width="60%"> This course will guide you for placement with theory,lecture videos, weekly assignments, contests and doubt assistance. </td> </tr> <tr> <td width="40%"> Amazon SDE Test Series </td> <td width="60%"> Test your skill & give the final touch to your preparation before applying for product based against like Amazon, Microsoft, etc. </td> </tr> </table> </div> </body> </html> Using CSS: The Cascading Style Sheet(CSS) is widely used to decorate the web pages which are of vast sizes. By using CSS, the styling of HTML elements is easy to modify. To fix the width of td tag the nth-child CSS is used to set the property of specific columns(determined by the value of n) in each row of the table. HTML <!DOCTYPE html> <html> <head> <title>Set up fixed width for <td></title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } table { width: 50%; } // Fixing width of first // column of each row td:nth-child(1) { width: 40%; } // Fixing width of second // column of each row td:nth-child(2) { width: 60%; } </style> </head> <body> <h1 style="color: #00cc00;"> GeeksforGeeks </h1> <!-- Making the table responsive --> <div style="overflow-x: auto;"> <!-- Adding table in the web page --> <table> <tr> <th>GfG Courses</th> <th>Description</th> </tr> <tr> <td>DS and Algo Foundation</td> <td> Master the basics of Data Structures and Algorithms to solve complex problems efficiently. </td> </tr> <tr> <td>Placement 100</td> <td> Test your skill & give the final touch to your preparation before applying for product based against like Amazon, Microsoft, etc. </td> </tr> <tr> <td>Amazon SDE Test Series</td> <td> Test your skill & give the final touch to your preparation before applying for product based against like Amazon, Microsoft, etc. </td> </tr> </table> </div> </body> </html> Using col tag and fixing the table layout property: If the same kind of column property is to be followed in every row of a table then using col tag to define the properties of the column is a great idea. If the col tag is written in the HTML document for the first time and its attributes are set, those all property refers to the first column of each row of the table inside which it is mentioned. Similarly using col tag for the second time and defining its attributes make its impact on the second column of each row of the table. Moreover, to adjust the long texts inside the columns CSS property table-layout:fixed; is used. Below is the implementation. HTML <!DOCTYPE html> <html> <head> <title>Set up fixed width for</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } table { width: 50%; } table.fixed { table-layout: fixed; } table.fixed td { overflow: hidden; } </style> </head> <body> <h1 style="color: #00cc00;"> GeeksforGeeks </h1> <!-- Making the table responsive --> <div style="overflow-x: auto;"> <!-- Adding table in the web page --> <table> <!-- Assigning width of first column of each row as 40% --> <col style="width: 40%;" /> <!-- Assigning width of second column of each row as 60% --> <col style="width: 60%;" /> <tr> <th>GfG Courses</th> <th>Description</th> </tr> <tr> <td>DS and Algo Foundation</td> <td> Master the basics of Data Structures and Algorithms to solve complex problems efficiently. </td> </tr> <tr> <td>Placement 100</td> <td> This course will guide you for placement with theory,lecture videos, weekly assignments, contests and doubt assistance. </td> </tr> <tr> <td>Amazon SDE Test Series</td> <td> Test your skill & give the final touch to your preparation before applying for product based against like Amazon, Microsoft, etc. </td> </tr> </table> </div> </body> </html> Output: The output will be same for every method. HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples. Comment More infoAdvertise with us Next Article How to merge table cells in HTML ? R RISHU_MISHRA Follow Improve Article Tags : Web Technologies HTML How To HTML-Tags HTML-Questions +1 More Similar Reads How to Create Table in HTML? HTML tables are used for organizing and displaying data in a structured format on web pages. Tables are commonly used for product information, presenting data analytics, or designing a pricing comparison chart. Elements of HTML TableTable ElementsDescription<table>The <table> element def 3 min read How to group the body content in a table using HTML5 ? In this article, group the body content in an <table> element in a document. It is used to define a standard cell in an HTML table. Syntax: <tbody> ... </tbody> Example 1: In this example, we use some HTML tags and make the group the body content in a table. html <!DOCTYPE html 3 min read How create table without using <table> tag ? HyperText Markup Language (HTML) is the standard markup language used to create web pages. HTML allows table creation using the <table> tag. However, tables can also be created in HTML without using <table> tag with the help of Cascading Style Sheet (CSS). CSS is a mechanism for adding s 3 min read What is the rule attribute in HTML Table ? This is an HTML attribute, that is used to specify which parts of the inside borders should be visible. The HTML rule attribute is applicable on table tags. The <table> rules attribute is not supported by HTML 5. Syntax: <table rules="value"> Attributes: This attribute accepts 5 values a 1 min read Why should we avoid use of tables for layout in HTML ? In this article, we will learn why we should avoid using tables for layout in HTML. A website can be divided into various sections comprising of header, menus, content, and footer based on which there are many different layout designs available for developers. Different layouts can be created by usi 4 min read How to fix the height of rows in the table? Fixing the height of rows in a table ensures that all rows have a uniform appearance, preventing them from resizing dynamically based on their content. This approach is useful for maintaining a consistent presentation, especially when dealing with tabular data that needs to be displayed neatly.Here 3 min read How to set the number of rows a table cell should span in HTML ? In this article, we will show how multiple rows are spanned by a table header cell. The task can be done by using the rowspan attribute while using the <th> tag. This property is used to merge one or more cells as well as increase the height of the single header cell automatically. Syntax: 2 min read How to set fixed width for <td> in a table ? The requirement of a table is very normal in the process of designing a web page. HTML provides the <table> tag to construct the table and to define rows and columns <tr> and <td> tags respectively are used. By default, the dimensions of the rows and columns in a table are adjusted 5 min read How to merge table cells in HTML ? The purpose of this article is to explore the method of merging table cells in HTML using the rowspan and colspan attributes. By utilizing rowspan, multiple cells in a row can be merged or combined, while colspan enables the merging of cells in a column within an HTML table. This technique proves es 2 min read How to Create Time-Table Schedule using HTML? A time table or schedule is essential for organizing tasks, events, or classes. We’ll create a basic time-table layout using HTML. A Table is an arrangement of rows and columns. Anyone can create a table by knowing the basics of HTML(HyperText Markup Language). In HTML we can use the <table> t 3 min read Like