如何在左上方對齊表格單元格？

Question

我有一個簡單的表結構。

 table > tbody > tr > td{ text-align:center; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/> <table class="table table-hover"> <thead> <tr> <td>Client</td> </tr> </thead> <tbody> <tr> <td class="col-md-4"> C 1 </td> </tr> <tr> <td class="col-md-4"> Client 2 </td> </tr> </tbody> </table> 

問題是 ：如何align td -s內容left align和center align 。 ？

輸出應該是這樣的：

Answer 1

如果您希望下部細胞從中間對齊，則只需向身體細胞中添加左填充的50％

 .table tbody td { padding-left: 50%; text-align; left; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" /> <table class="table table-hover"> <thead> <tr> <td>Client</td> </tr> </thead> <tbody> <tr> <td class="col-md-4"> C 1 </td> </tr> <tr> <td class="col-md-4"> Client 2 </td> </tr> </tbody> </table> 

如果您希望它們集中在最大的單詞上，然后左對齊，則無法為tbody提供單獨的行，則需要將所有單詞都包裝在內聯代碼塊div中：

 .col-md-4 { text-align: center; } .inline-block { display: inline-block; text-align: left; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" /> <table class="table table-hover"> <thead> <tr> <td>Client</td> </tr> </thead> <tbody> <tr> <td class="col-md-4"> <div class="inline-block"> C 1<br> Client 2 </div> </td> </tr> </tbody> </table> 

Answer 2

嘗試這個：

 td { width: 50%; } 

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/> <table class="table table-hover"> <thead> <tr> <td>Client</td> <td></td> </tr> </thead> <tbody> <tr> <td> </td> <td> C 1 </td> </tr> <tr> <td> </td> <td> Client 2 </td> </tr> </tbody> </table> 

如果您無法添加額外的table-cells ，則可以使用padding ：

 .table tbody td { padding-left: 50%; } 

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/> <table class="table table-hover"> <thead> <tr> <td>Client</td> </tr> </thead> <tbody> <tr> <td> C 1 </td> </tr> <tr> <td> Client 2 </td> </tr> </tbody> </table> 

Answer 3

 td { width: 50%; } td:last-child { border-left:1px solid #333; } 

  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/> <table class="table table-hover"> <thead> <tr> <td>Client</td> <td></td> </tr> </thead> <tbody> <tr> <td> </td> <td> C 1 </td> </tr> <tr> <td> </td> <td> Client 2 </td> </tr> </tbody> </table> 

Answer 4

嘗試colspan="<number of columns to merge>"和rowspan="<number of rows to merge>"以合並行或列：

<table>
    <thead>
    <tr>
        <td colspan="2" align="center">Client</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2" width="50%"></td>
        <td>
            C 1
        </td>
    </tr>
    <tr>
        <td>
            Client 2
        </td>
    </tr>
    </tbody>
</table>