CSS Changing The Look of A Table

Question

I have a table on my website which contains the columns: User, Title, Description, Join, Update, Delete.

The "User" column's width is way too big as well as the "Title" column. I need help with CSS to set them to something smaller without affecting the width of the other columns as they are perfect as is.

My Code:

<?php
echo "<table>
   <tr>
   <th>User</th>
   <th>Title</th>
   <th>Description</th>
   <th></th>
   <th>Join</th>
   <th>Update</th>
   <th>Delete</th>
   </tr>";

while ($record = mysql_fetch_array($myData))
    {
    echo "<form action=findGroup.php method=post>";
    echo "<div class=joinLink>";
    echo "<tr>";
    echo "<td>" . "<input type=text name=name value='" . $record['form_user'] . "'/> </td>";
    echo "<td>" . "<input type=text name=name value='" . $record['form_name'] . "'/> </td>";
    echo "<td>" . "<input type=text name=description value='" . $record['form_description'] . "'/> </td>";
    echo "<td>" . "<input type=hidden name=hidden value='" . $record['form_id'] . "'/></td>";
    echo "<td><a class=joinLink type=text name=join href='http://localhost:3000'>Join</a></td>";
    echo "<td>" . "<input type=submit name=update value='Update" . "'/> </td>";
    echo "<td>" . "<input type=submit name=delete value='Delete" . "'/> </td>";
    echo "</tr>";
    echo "</div>";
    echo "</form>";
    }

echo "</table>";

CSS:

 table {
     width: 100%;
     font: 17px/1.5 Arial, Helvetica,sans-serif;
     text-align: centre;
     align: centre;
}
 input {
     width: 100%;
     font: 13px/1.5 Arial, Helvetica,sans-serif;
     text-align: centre;
     align: centre;
     height: auto;
     overflow: hidden;
}
 th {
     align: centre;
     text-align: centre;
     background-color: #4D5960;
     color: white;
}
 tr {
    background-color: #f2f2f2
}
 input[type="text"]{
    width:100% !important;
     line-height:30px;
     box-sizing:border-box;
}
 a[type="text"]{
    width:100% !important;
     line-height:30px;
     box-sizing:border-box;
}

Answer 1

You can use width property to fix the width of your columns. You can apply width in html directly or using css

HTML

<td width="20%">content</td>
<th width="20%">content</th>

CSS

.custom-class{
  width: 20%;
}

<th class="custom-class"></th>

<td class="custom-class"></td>