CSS 改变 A 的外观 Table

Question

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

"User" 列和 "Title" 列的宽度太大了。我需要有关 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>

Answer 2

好像没什么问题，都一样

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/

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

Answer 3

有一堆 jQuery table 插件。检查 this。

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

Answer 4

如果您不介意，我建议您进行一些更改，请参见下文。检查表单操作是加入、更新还是删除以执行操作。关于提交表单时收到的数据结构，请查看 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>

CSS 改变 A 的外观 Table

CSS Changing The Look of A Table

html

css

php

html-table

width