如何居中表格標題？

Question

我在桌子上有一個長長的標題，並希望它們都對齊到對方的中心。

HTML：

<table> 
    <caption>This is a very long caption.</caption> 
    <tr> 
    <td>1</td><td>2</td> 
    </tr> 
    <tr> 
    <td>3</td><td>4</td> 
    </tr> 
</table> 

CSS：

caption { 
    white-space: nowrap; 
} 

https://codepen.io/anon/pen/RZyxzg

Answer 1

使用Flexbox的爲，使用align-items:center

table { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    border: red solid 
 
}

<table> 
 
    <caption>This is a very long caption.</caption> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
</table>

Answer 2

它已經是是。使用text-align: center可以給出邊框並且看到文字將延伸整個表格的寬度。 （見的行爲，當你設置width到table）

注意：這似乎並不在Firefox中的工作 - 該表不調整其寬度例如Chrome瀏覽器使用white-space: nowrap時。

請參見下面的演示：

table { 
 
    border-collapse: collapse; 
 
} 
 

 
caption { 
 
    white-space: nowrap; 
 
} 
 

 
td { 
 
    border: 1px solid; 
 
    text-align: center; 
 
}

<table> 
 
    <caption>This is a very long caption and even longer</caption> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
</table>