計算表中的行數並更改單列的寬度..？

Question

我需要按順序對表格行進行計數，作為“N”列中的一列，我還需要使“N”列的寬度看起來比其他列小我認為我已經做了所有事情，但這是我唯一能做的沒有達到

output 應該如圖所示：

我希望你們能幫助我，謝謝，這是我的代碼：

<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<?php
  // DataBase connection
  $host     = "localhost";
  $user     = "root";
  $password = "";
  $db       = "worksheet9";

  $con = mysqli_connect($host, $user, $password, $db);

  //verfiy Connection
  if( mysqli_connect_errno()) {
    echo " Connection Error:" . mysqli_connect_error();
  }
  if(isset($_POST['submit'])) { 

    $task=$_POST['task'];
    
  // insert sql query 
    $sql = "INSERT INTO dolist (task) VALUES ('$task')";
    
    $result=mysqli_query($con, $sql);
    
  // verify query 
    if ($result) {
      echo "New record created successfully";
    } else {
      echo "Error: " . $sql . "<br>" . mysqli_error($con);
    }
  }  
?> 
<form method='POST'>
<input type="text" name="task" id="task" required 
        placeholder="add task" oninvalid="this.setCustomValidity('you must fill the task')"
        oninput="this.setCustomValidity('')"> 
<input type="submit"name="submit"value="add task" ><!-- comment -->

</form> 

<table border="1">
  <tr> 
    <th> N </th>
    <th>ID </th> 
    <th>task</th> 
    <th>delete</th><!-- comment -->
    <th>update</th>
  </tr>

<?php
  //  Select sql query 
  $sql    = "SELECT ID,task FROM dolist";
  $result = mysqli_query($con, $sql);

  while ($rows = mysqli_fetch_array($result)) {
  echo"<form method ='POST'>";
    echo "<tr>";
    echo "<td>" . "<input type='number' readonly name='number' value='" . $rows[''] . "'></td>"; 
    echo "<td>" . "<input type='text' readonly name='id' value='" . $rows['ID'] . "'></td>"; 
    echo "<td>" . "<input type='text' name='task' value= '" . $rows['task'] . "'></td>";
    echo "<td>" . "<input type='submit' name='delete' value='x'>" . "</td>";
    echo "<td>" . "<input type='submit' name='update' value='update'>" . "</td>";
    echo "</tr>";
    echo "</form>";
  }
  
  if(isset($_POST['update'])) {
    $sql    = "UPDATE dolist SET task='$_POST[task]'WHERE ID=$_POST[id]";
    $result = mysqli_query($con,$sql) or die(mysqli_connect_errno());
    if($result){
      echo "updated";
    } else {
      echo "update faild";
    }
  } 
  //perform only when the user click on Delete
  if(isset($_POST['delete'])) {
    $sql    = "DELETE FROM dolist WHERE ID=$_POST[id]";
    $result = mysqli_query($con,$sql) or die(mysqli_connect_errno());
    if($result){
      echo "DELETED";
      }else{
      echo "delete faild";
    }
  }
?>  
</table>
</body>
</html>

Answer 1

對於行編號，在您的 PHP 代碼中添加一個計數器：

$rowNumber = 1;
while ($rows = mysqli_fetch_array($result)){
echo"<form method ='POST'>";
    echo "<tr>";
       echo "<td>" . $rowNumber++. "</td>"; 

       // echo other fields...
               
    echo"</tr>";

對於格式化，給你的表格一個 ID（不是必需的，但它使 CSS 樣式更具體）

這應該生成 HTML ，如下所示：

<table id="results">
    <tr><th>N</th><th>ID</th><th>task</th><th>Delete</th><th>Update</th></tr>
    <tr><td>1</td><td>11</td><td>task</td><td>X</td><td>Update</td></tr>
    <tr><td>2</td><td>12</td><td>task</td><td>X</td><td>Update</td></tr>

</table>

現在，您可以使用 CSS 對其進行樣式設置：

   /* Border around the table */
   #results {     
        border: 1px solid grey;
    }

    /* Border around the individual cells */
    #results th, #results td {
        border: 1px solid gray;
    }

    /* Set the width of the first TH. Also sets the width of the res of the column */
    #results th:first-of-type {
        width:1em;
    }
    /* Set the width of the 3rd column (the 'task' column */
    #results th:nth-of-type(3) {
        width:10em;
    }

Output：

注意：您可以通過將 class 屬性添加到<th>元素並設置它們的樣式來做到這一點。 它使以后的維護更容易。

在 HTML 標簽（如BORDER="1" ）中使用格式屬性被認為是不好的做法，應該避免。

Answer 2

不要使用 JS 或 PHP 來計算純 CSS可以幫助您

使用CSS 計數器
使用<thead>和<tbody>表格元素
使用width: 0%; 對於你想要真正壓縮寬度的td

 .tbodyCount { counter-reset: rowIndex; }.tbodyCount tr { counter-increment: rowIndex; }.tbodyCount td:nth-child(1)::before { width: 0%; /* Make as smaller as possible */ content: counter(rowIndex); /* Learn about counters*/ }

 <table> <thead> <tr> <th>N</th> <th>ID</th> </tr> </thead> <tbody class="tbodyCount"> <tr> <td></td> <td>Foo</td> </tr> <tr> <td></td> <td>Bar</td> </tr> <tr> <td></td> <td>Baz</td> </tr> </tbody> </table>

計算表中的行數並更改單列的寬度..？

問題描述

2 個解決方案

解決方案1
0 已采納 2021-03-28 01:51:54

解決方案2
0 2021-03-28 02:06:14

計算表中的行數並更改單列的寬度..？

問題描述

2 個解決方案

解決方案1 0 已采納 2021-03-28 01:51:54

解決方案2 0 2021-03-28 02:06:14

解決方案1
0 已采納 2021-03-28 01:51:54

解決方案2
0 2021-03-28 02:06:14