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

您可以使用宽度属性来修复列的宽度。您可以直接在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>

Answer 2

如果您不介意我会建议进行一些更改，请参阅下文。检查表单操作是加入，更新还是删除以执行操作。关于提交表单时收到的数据结构，请查看var_dump($_POST);部分

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

似乎没有问题，一切都是一样的

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/

你也可以使用Bootstrap 4，也许它会更好https://www.w3schools.com/bootstrap4/bootstrap_forms.asp

Answer 4

有很多jQuery表插件。检查this。

我的收藏夹是DataTables，x-Editable和Bootgrid。还有开放源代码，您可以使用他们的Github仓库查看它们。

CSS改变表的外观

4 个答案: