CSS 改变表格的外观

Posted 2023-03-06

【中文标题】CSS 改变表格的外观

【英文标题】：CSS Changing The Look of A Table

【发布时间】：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 我知道代码被贬值了，很快就会修复！

【参考方案1】：

您可以使用 width 属性来固定列的宽度。您可以直接在html中应用宽度或使用css

HTML

<td >content</td>
<th >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 存储库中查看它们。