php - CSS 改变表格的外观

Question

我的网站上有一个表格，其中包含以下列:用户、标题、描述、加入、更新、删除。

“用户”列的宽度和“标题”列一样太大。我需要 CSS 方面的帮助，以便将它们设置为更小的值而不影响其他列的宽度，因为它们是完美的。

我的代码:

<?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

您可以使用 width 属性来固定列的宽度。您可以直接在 html 中应用宽度或使用 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>