如何使用 Bootstrap 4 對齊表格的 th 和 td 內容？

Question

我在對齊 th 和 td 內容時遇到了麻煩。 我不知道還能做什么，我已經使用了 bootstrap 4 中所有可能的類，例如：text-center、center-block、align-items-center、justify-content-center 和其他，但表格看起來是一樣的。 請給我一個解決此問題的想法或更好地幫助我找到問題。 提前致謝。 表員工

<div class="container-fluid" >
<div class="card border-1">
<div class="table-responsive  my-auto">
 <table id="tabla" class="table table-fixed table-striped table-condensed 
  text-nowrap mb-1">  
        <tr class="card-header bg-info text-center " style="color:white;">
            <th>Id</th>
            <th>Name Employees</th>
            <th>User Name</th>
            <th>Department</th>
            <th>Position</th>
            <th>Campaign</th>
            <th></th>
            <th></th>
        </tr>
        <tr class="text-center"  >
            <td>'.$item['id_employee'].'</td>
            <td>'.$item['name_employee'].'</td>
            <td>'.$item['user_employee'].'</td>
            <td>'.$item['name_department'].'</td>
            <td>'.$item['name_position'].'</td>
            <td>'.$item['name_campaign'].'</td>

            <!--BUTTON DEL MODAL-->
            <td><a href="options.php?action=editEmployee&edit='.$item["id_employee"].'"> 
            <button type="button" style="border-radius:8px;" class="btn btn-outline-primary btn-sm"> 
            <i class="fas fa-edit"></i></button></a></td>

             <td>
        <a href="options.php?action=employee&Del_Employee='.$item["id_employee"].'"> 
             <button style="border-radius:8px;" class="btn btn-outline-danger btn-sm" type="button">
             <i class="fas fa-trash"></i></button></a></td> 
      </tr>
      </table>
      </div>
      </div>
      </div>

Answer 1

從圖片來看，看起來你有多個表，比如：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <table class="table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Description</th> </tr> <tbody> <tr> <td>1</td> <td>John Smith</td> <td>N/A</td> </tr> </tbody> </table> <table class="table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Description</th> </tr> <tbody> <tr> <td>2</td> <td>Frank Peters</td> <td>Frank Peters has a much longer description than John</td> </tr> </tbody> </table>

擁有多個表意味着每個表將調整其列的大小，獨立於其他表。

您要做的是將它們放在同一張表中：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <table class="table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Description</th> </tr> <tbody> <tr> <td>1</td> <td>John Smith</td> <td>N/A</td> </tr> </tbody> <thead> <tr> <th>ID</th> <th>Name</th> <th>Description</th> </tr> <tbody> <tr> <td>2</td> <td>Frank Peters</td> <td>Frank Peters has a much longer description than John</td> </tr> </tbody> </table>