CSS 改变表格的外观答案

【问题标题】：CSS Changing The Look of A TableCSS 改变表格的外观
【发布时间】：2018-09-25 09:40:30
【问题描述】：

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

“用户”列的宽度以及“标题”列的宽度都太大了。我需要 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;
}

【问题讨论】：

这不是一个真正的 PHP 问题，尽管您使用 PHP 来生成它。您应该将生成的 HTML 添加到问题中。
不要使用已弃用且不安全的mysql_*-函数。它们自 PHP 5.5（2013 年）以来已被弃用，并在 PHP 7（2015 年）中完全删除。请改用 MySQLi 或 PDO。
您还应该为每个name 属性指定唯一的名称。处理您的表单后，您将无法区分 form_user 和 form_name。
@chris85 感谢您的建议。
@MagnusEriksson 我知道代码被贬值了，很快就会修复！

标签： php html css html-table width

【解决方案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>

【讨论】：

这是将类名添加到 th 标签的正确方法吗？ User（记住 th 标记被回显）
经过一些故障排除后，我就可以使用您的解决方案了！ :) 谢谢你的帮助！

【解决方案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>

【讨论】：

好的，谢谢您的建议，将更改我的代码以跟随您的代码:)
对您有帮助吗？我很高兴你喜欢它:)

【解决方案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

【讨论】：

为了实现我在这篇文章中所说的，我已经改变了很多 CSS，但没有运气。我不希望一切都一样，我想减少表格中标题和用户列的宽度，你可能知道如何实现这一点吗？ :)

【解决方案4】：

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

我最喜欢的是DataTables、x-Editable 和Bootgrid。也有开源，您可以在他们的 Github 存储库中查看它们。

【讨论】：