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.
- 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 .
- 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.
- Output: The output will be same for every method.
- How to create table with 100% width, with vertical scroll inside table body in HTML ?
- How to design Responsive card-deck with fixed width in Bootstrap ?
- HTML width/height Attribute vs CSS width/height Property
- HTML | <table> width Attribute
- HTML | DOM Table width Property
- How to create equal width table cell using CSS ?
- How to fix the width of columns in the table ?
- How to add table row in a table using jQuery?
- How to remove table row from table using jQuery ?
- How to make Bootstrap table with sticky table head?
- How create table without using <table> tag ?
- How to fixed one column and scrollable other column or columns in Bootstrap ?
- Fixed-priority pre-emptive scheduling
- How to place content under fixed flexbox navigation bar ?
- How to set flexbox having unequal width of elements using CSS ?
- How to set div width to fit content using CSS ?
- How to set stroke width of a canvas circle using Fabric.js ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.