[英]How to align table cells center left?
我有一个简单的表结构。
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
。 ?
如果您希望下部细胞从中间对齐,则只需向身体细胞中添加左填充的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>
尝试这个:
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>
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>
尝试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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.