HTML Element Style How to - Resize columns proportionally in an HTML table

Question

We would like to know how to resize columns proportionally in an HTML table.

Answer


<!DOCTYPE html>
<html>
<head>
</head><!--   ww  w .ja  va  2 s  .c o  m-->
<body>
  <table style="width: 398px;">
    <tbody>
      <tr>
        <th style="width: 230px; background-color: blue"></th>
        <th>Col B</th>
        <th>Col C</th>
        <th>Col D</th>
      </tr>
    </tbody>
    <table>
</body>
</html>

The code above is rendered as follows: