How To Set The Table Column Width Regardless Of The Text Amount ...

Trang chủ » Html Change Column Width Table » How To Set The Table Column Width Regardless Of The Text Amount ...

Có thể bạn quan tâm

w3docs logo Books Learn HTML Learn CSS Learn Git Learn Javascript Learn PHP Learn python Learn Java Exercises HTML JavaScript Git CSS PHP Courses Quizzes Snippets Tools General Tools
  • Password Generator
  • HTML Editor
  • HTML Encoder
  • Base 64
  • Code Diff
  • JSON Beautifier
  • CSS Beautifier
  • Markdown Convertor
  • Find the Closest Tailwind CSS Color
  • Phrase encrypt / decrypt
  • Browser Feature Detection
  • Number convertor
CSS Maker
  • CSS Maker
  • CSS Maker text shadow
  • CSS Maker Text Rotation
  • CSS Maker Out Line
  • CSS Maker RGB Shadow
  • CSS Maker Transform
  • CSS Maker Font Face
Color Tools
  • Color Picker
  • Colors CMYK
  • Colors HWB
  • Colors HSL
  • Color Hex
  • Color mixer
  • Color Converter
  • Colors RGB
  • Color Contrast Analyzer
  • Color Gradient
String Tools
  • String Length Calculator
  • MD5 Hash Generator
  • Sha256 Hash Generator
  • String Reverse
  • URL Encoder
  • URL Decoder
  • Base 64 Encoder
  • Base 64 Decoder
  • Extra Spaces Remover
  • String to Lowercase
  • String to Uppercase
  • Word Count Calculator
  • Empty Lines Remover
  • HTML Tags Remover
  • Binary to Hex
  • Hex to Binary
  • Rot13 Transform on a String
  • String to Binary
  • Duplicate Lines Remover
Change theme
  • Dark
  • Light
  • System
  • Books
    • Learn HTML
    • Learn CSS
    • Learn Git
    • Learn Javascript
    • Learn PHP
    • Learn python
    • Learn Java
  • How To
    • How To NodeJs
    • How To Linux
    • How To AngularJs
    • How To PHP
    • How To HTML
    • How To CSS
    • How To Symfony
    • How To Git
    • How To Apache
    • How To JavaScript
    • How To Java
    • How To Vue.js
    • How To Python
  1. Snippets
  2. HTML
  3. How to Set the Table Column Width Regardless of the Text Amount in its Cells
How to Set the Table Column Width Regardless of the Text Amount in its Cells

When working with tables, you may come across the difficulty of setting the width of the table, which does not depend on the amount of text in the cells. Sometimes, when the text in one of the cells of the column is too long, the column’s width change.

In this snippet, we’ll demonstrate how to overcome this problem step by step and then you can try the full example.

Create HTML

  • Use a <table> element.
  • Add two <tr> elements with <th> elements within each of them.
<table> <tr> <th>header 1235466549845</th> <th>header 2, Lorem Ipsum</th> </tr> <tr> <td>Some text</td> <td>This is a loooooooooooooooong text for exampeeeeeeeele.</td> </tr> </table>

Add CSS

  • Specify the border and width properties of the <table> element and set the table-layout to “fixed”.
  • Specify the border and width properties of the <th> and <td> elements.
table { border: 1px solid #666; table-layout: fixed; width: 180px; } th, td { border: 1px solid #666; width: 90px; overflow: hidden; }

Now, you can try the full example.

Example of setting the table column width:

<!DOCTYPE html> <html> <head> <style> table { border: 1px solid #666; table-layout: fixed; width: 180px; } th, td { border: 1px solid #666; width: 90px; overflow: hidden; } </style> </head> <body> <table> <tr> <th>header 1235466549845</th> <th>header 2, Lorem Ipsum</th> </tr> <tr> <td>Some text</td> <td>This is a loooooooooooooooong text for exampeeeeeeeele</td> </tr> </table> </body> </html> Try it Yourself »

Result

header 1235466549845 header 2, Lorem Ipsum
Some text This is a loooooooooooooooong text for exampeeeeeeeele
Tags html table width column

Related Resources

  • How to Remove Cellspacing from Tables Using CSS
  • How to Select the First and Last <td> in a Row with CSS
  • How to Center the Text in the HTML Table Row
  • How to Add Space Between Rows in the Table
Sorry about that How can we improve it? Submit Thanks for your feedback! Thanks for your feedback! Do you find this helpful? Yes No Quizzes
  • PHP basics
  • HTML Basics
  • Javascript Basics
  • CSS Basics
  • ES6 Basics
  • TypeScript Basics
  • React Basics
  • Angular Basics
  • Sass Basics
  • Git Basics
  • Vue.js Basics
  • SQL Basics
  • Python Basics
  • Java Basics
  • NodeJS Basics

Từ khóa » Html Change Column Width Table