Horje
How to edit HTML Table Column Width

To set the size of a specific column, add the style attribute on a <th> or <td> element:


Example of HTML Table Column Width

 <table style="width:100%">
  <tr>
    <th style="width:70%">Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table> 

Full Example of HTML Table Column Width

Set the width of the first column to 70%:
index.html
Example: HTML
<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
  border-collapse: collapse;
}
</style>
<body>

<h2>Set the first column to 70% of the table width</h2>

<table style="width:100%">
  <tr>
    <th style="width:70%">Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Output should be:

Full Example of HTML Table Column Width
Reffered: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_column_width





Related Articles
What is HTML Table Sizes HTML Table Sizes
How to edit HTML Table Width HTML Table Sizes
How to edit HTML Table Column Width HTML Table Sizes
How to edit HTML Table Row Height HTML Table Sizes

Single Articles
Example of HTML Table Column WidthHTML Table Sizes
Full Example of HTML Table Column WidthHTML Table Sizes

Read Full:
HTML Table Sizes
Category:
Web Tutorial
Sub Category:
HTML Table Sizes
Uploaded:
1 year ago
Uploaded by:
Admin
Views:
32



Share on: