Make Columns of Equal Width in <Table>

Make columns of equal width in table

I think that this will do the trick:

table{
    table-layout: fixed;
    width: 300px;
}

Table with 100% width with equal size columns

<table width="400px">
  <tr>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  </tr>
</table>

For variable number of columns use %

<table width="100%">
  <tr>
  <td width="(100/x)%"></td>
  </tr>
</table>

where 'x' is number of columns

Making two of 4 columns equal width

You are looking for the table-layout: fixed;.

table-layout: fixed; - Table and column widths are set by the widths
of table and col elements or by the width of the first row of cells.
Cells in subsequent rows do not affect column widths.

see: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

table, td {      padding: 0px;      margin: 0px;      border: none;      border-collapse: collapse;    }    table.main_table {      width: 100%;      table-layout: fixed;    }    td.fixed_column {      width: 190px;      background-color: red;    }    td.non_fixed_column {      background-color: yellow;    }

<table class='main_table'>      <tr><td class='fixed_column'>1.1</td>      <td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>      <tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>    </table>

HTML table: keep the same width for columns

If you set the style table-layout: fixed; on your table, you can override the browser's automatic column resizing. The browser will then set column widths based on the width of cells in the first row of the table. Change your <thead> to <caption> and remove the <td> inside of it, and then set fixed widths for the cells in <tbody>.

How to make table columns' height and width equal

Try this snippet:

body{ font-size: 18px; font-family: "Lucida Sans Unicode";}
.header { font-size: 60px; font-weight: bold; padding: 0 auto; text-align: center;}
td{               /* ADDED */    width: 100px;    height: 100px;}

<table border="1" cellpadding="25px">   <tr>    <td colspan="4" class="header"><span>SoftUni LIFE</span></td>  </tr>  <tr>    <td colspan="2"><span>Google</span></td>    <td colspan="2">GitHub</td>  </tr>  <tr>    <td>FB</td>    <td>GMail</td>    <td>YouTube</td>    <td>2048</td>  </tr>  <tr>    <td>Food</td>    <td colspan="2">Game</td>    <td>      <table border="1">        <tr>          <td>Social Life</td>        </tr>        <tr>          <td>Sleep</td>        </tr>      </table>    </td>  </tr>  <tr>    <td colspan="3">Beer></td>    <td>WC</td>  </tr></table>

Make Columns of Equal Width in <Table>