-2

I have a table in which I have 4 columns:

column 1: fixed width of 500px;
column 2: calc(33% - 165px);
column 3: calc(33% - 165px);
column 4: calc(33% - 165px);

Having same value on last 3 columns, the width of those columns is different.

Here is my html:

<table class="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 500px;">Vishal</td>
      <td style="width: calc(33% - 165px); background: #ff0000;">Sherathiya</td>
      <td style="width: calc(33% - 165px); background: #ffff00;">28</td>
      <td style="width: calc(33% - 165px); background: #ff00ff;">edit</td>
    </tr>
    <tr>
      <td>Seema</td>
      <td>Kaneria</td>
      <td>23</td>
      <td>edit</td>
    </tr>
    <tr>
      <td>Nikunj</td>
      <td>Ramani</td>
      <td>20</td>
      <td>delete</td>
    </tr>
  </tbody>
</table>

Here is css:

.table {
  width: 100%;
}

Here is the codepen that reproduces the issue:

https://codepen.io/Vishal1419/pen/aqOErL

Solution:

I had to have table-layout: fixed. Also, I had to apply styles for header as well. So, now

my html looks like:

<table class="table">
  <thead>
    <tr>
      <th style="width: 500px;">First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 500px;">Vishal</td>
      <td class="field">Sherathiya</td>
      <td class="field">28</td>
      <td class="field">edit</td>
    </tr>
    <tr>
      <td>Seema</td>
      <td>Kaneria</td>
      <td>23</td>
      <td>edit</td>
    </tr>
    <tr>
      <td>Nikunj</td>
      <td>Ramani</td>
      <td>20</td>
      <td>delete</td>
    </tr>
  </tbody>
</table>

and css:

table{ table-layout:fixed; width: 100%; }

.field { width: calc(33% - 165px); background: #ff0000; }

Vishal
  • 6,238
  • 10
  • 82
  • 158

1 Answers1

-1

Just use css and give them classes:

html, body {
  width: 100%;
}

.field {
  width: calc(33% - 165px);
  background: #ff0000;
}

HTML:

<td style="width: 500px;">Vishal</td>
  <td class="field">Sherathiya</td>
  <td class="field">28</td>
  <td class="field">edit</td>
Pistolpete .
  • 1,118
  • 1
  • 8
  • 17