css - 使用 css 将表格标题与表格数据对齐

Question

下表用于从数据库中检索数据。如何使表格标题与表格数据对齐？表格标题和表格数据未正确对齐。可能这是一个简单的 css 问题，但我很困惑，不知道该怎么做。帮助将不胜感激

 <table class="table table-lg" id="Table">
    <thead >
        <tr style="display:inline;" class="filters">
            <th ><input type="text" class="form-control" placeholder="Project" disabled></th>
            <th><input type="text" class="form-control" placeholder="Client " disabled></th>
            <th><input type="text" class="form-control" placeholder="Project Start On" disabled></th>
            <th><input type="text" class="form-control" placeholder="End On" disabled></th>
            <th><input type="text" class="form-control" placeholder="Task" disabled></th>  
            <th><input type="text" class="form-control" placeholder="Description" disabled></th>  
            <th><input type="text" class="form-control" placeholder="Commission" disabled></th>
            <th><input type="text" class="form-control" placeholder="Task Start On" disabled></th>
            <th><input type="text" class="form-control" placeholder="Due On" disabled></th>
            <th><input type="text" class="form-control" placeholder="Start" disabled></th>
            <th><input type="text" class="form-control" placeholder="Pause" disabled></th>
            <th><input type="text" class="form-control" placeholder="Stop" disabled></th>
        </tr>
    </thead>
    <tbody>
      <?php
        if(isset($view_data) && is_array($view_data) && count($view_data)): $i=1;
        foreach ($view_data as $key => $data) { 
        ?>
            <tr style="display:inline;"  <?php if($i%2==0){echo 'class="even"';}else{echo'class="odd"';}?>>
            <td><?php echo $data['projectname']; ?></td> 
            </tr>  
            <tr style="display:inline;">  
            <td><?php echo $data['ClientName']; ?></td>
            </tr>  
            <tr style="display:inline;">  
            <td><?php echo $data['datetimepicker20']; ?></td>
            </tr>  
            <tr style="display:inline;">
            <td><?php echo $data['datetimepicker21']; ?></td>
            </tr>  
            <tr style="display:inline;">    
            <td><?php echo $data['task']; ?></td>
            </tr>  
            <tr style="display:inline;">   
            <td><?php echo $data['Description']; ?></td>
            </tr>  
            <tr style="display:inline;">   
            <td><?php echo $data['Commission']; ?></td>
            </tr>  
            <tr style="display:inline;">   
            <td><?php echo $data['datetimepicker21']; ?></td>
            </tr>  
            <tr style="display:inline;">   
            <td><?php echo $data['datetimepicker22']; ?></td>
            </tr>           
            <tr class="highlight" style="display:inline-block;">
            <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
            <td>Click me</td>
            </tr>
            <tr style="display:inline-block;">
            <td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
            <td>Click me</td>
            </tr>
            <tr style="display:inline-block;">
            <td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
            <td>Click me</td>
            </tr>

      <?php
            $i++;
              }
            else:
        ?>
        <tr>
            <td colspan="7" align="center" >No Records Found..</td>
        </tr>
        <?php
            endif;
        ?>
    </tbody>                
    </table>

  </div>

此代码提供以下输出。

Answer 1

您的问题来自设置 display: inline在 <tr> .最好的办法是不要乱用 display任何表格相关元素的 css 属性，并保留它们的默认值 display值。可以看到所有可能的display值 here , 注意所有 table-*值(value)观。