CSS Changing The Look of A Table - php

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>

Answer 2

If you don't mind I would suggest some changes, see below. Check if the form action is either join, update or delete to perform the action. About the data structure you receive when the form is submitted check out the var_dump($_POST); part
PHP:
<?php
var_dump($_POST);
?>
CSS:
table {
width: 100%;
font: 17px/1.5 Arial, Helvetica,sans-serif;
}
input[type="text"] {
width: 100%;
font: 13px/1.5 Arial, Helvetica,sans-serif;
text-align: center;
box-sizing: border-box;
padding: 6px 13px;
}
button {
width: 100%;
font: 13px/1.5 Arial, Helvetica,sans-serif;
text-align: center;
box-sizing: border-box;
padding: 6px 13px;
}
thead th {
align: center;
text-align: center;
background-color: #4D5960;
color: #ffffff;
}
tbody td {
align: center;
text-align: center;
background-color: #f2f2f2;
}
HTML/PHP:
<form action="index.php" method="POST" enctype="application/x-www-form-urlencoded">
<table>
<thead>
<tr>
<th class="col-name">User</th>
<th class="col-title">Title</th>
<th class="col-description">Description</th>
<th class="col-join">Join</th>
<th class="col-update">Update</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
<?php foreach ([0, 1, 2, 3] as $row) : ?>
<tr>
<td class="col-name">
<input type="hidden" name="user[id][]" value="">
<input type="text" name="user[name][]" value="" size="10">
</td>
<td class="col-title">
<input type="text" name="user[title][]" value="" size="10">
</td>
<td class="col-description">
<input type="text" name="user[description][]" value="" size="10">
</td>
<td class="col-join">
<button type="submit" name="action" value="join">Join</button>
</td>
<td class="col-update">
<button type="submit" name="action" value="update">Update</button>
</td>
<td class="col-delete">
<button type="submit" name="action" value="delete">Delete</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</form>

Answer 3

it seems that there is no problem, everything is the same
table {
width: 100%;
font: 17px/1.5 Arial, Helvetica,sans-serif;
text-align: center;
align: center;
}
input {
width: 100%;
font: 13px/1.5 Arial, Helvetica,sans-serif;
text-align: center;
align: center;
height: auto;
overflow: hidden;
}
th {
align:center;
text-align: center;
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;}
https://jsfiddle.net/1qy5v05p/6/
you can also use Bootstrap 4, maybe it will be better https://www.w3schools.com/bootstrap4/bootstrap_forms.asp

Answer 4

There are bunch of jQuery table plugins. Check this out.
My favourites are DataTables, x-Editable and Bootgrid. There are also open sources, you can see them with their Github repo.