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-*值。

Answer 2

最后我找到了答案。下面给出了

    <table class="table table-lg" id="Table">
        <thead >
            <tr 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 class="highlight" <?php if($i%2==0){echo 'class="even"';}else{echo'class="odd"';}?>>
            <td><?php echo $data['projectname']; ?></td> 

            <td><?php echo $data['ClientName']; ?></td>

            <td><?php echo $data['datetimepicker20']; ?></td>

            <td><?php echo $data['datetimepicker21']; ?></td>

            <td><?php echo $data['task']; ?></td>

            <td><?php echo $data['Description']; ?></td>

            <td><?php echo $data['Commission']; ?></td>

            <td><?php echo $data['datetimepicker21']; ?></td>

            <td><?php echo $data['datetimepicker22']; ?></td>








    <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>


    <td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>

    <td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>

    </tr>























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

    </tbody>                
    </table>

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

2 个答案: