如何使表格行的背景颜色超过其文本？

Question

将表格行的背景颜色设置为灰色，您将获得一个看起来像这样的表格行

+-------------------+--------------------+------------------------+---------------+
|Col1               |        Col2        |          Col3          | Numeric Column|
+------------ ------+--------------------+------------------------+---------------+

我希望能够填充左右两边的文本然后才能获得这样的效果

    +----------------+------------------+----------------------+---------------+
    |     Col1       |        Col2      |        Col3          | Numeric Column|
    +----------------+------------------+----------------------+---------------+

有可能吗？我希望行和标题都有这种效果

表格HTML和CSS下面：

＆＃13;

＆＃13;

table {
    border-collapse: separate;
    border-spacing: 0 1rem;
    font-size: 85%;
}

th {
    letter-spacing: 1px;
    padding-left: 1rem;
    border: 0;
}

td {
    background-color: grey;
    border-radius: 5px;
    border: 0;
}

＆＃13;

<table class="content-table">
    <thead>
        <tr>
            <th><strong>Name</strong></th>
            <th><strong>Age</strong></th>
            <th><strong>Height</strong></th>
            <th><strong>Location</strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stephen Curry</td>
            <td>27</td>
            <td>1,91</td>
            <td>Akron, OH</td>
        </tr>
        <tr>
            <td>Klay Thompson</td>
            <td>25</td>
            <td>2,01</td>
            <td>Los Angeles, CA</td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

编辑： 在Dribbble上找到ueno的图片，显示了我想要实现的效果。在下面的图片中，您可以看到表格中的行数＆＃39;背景颜色略微传递文本，而在我的桌子上（第二张图像），它没有。我知道我可以设置text-align：center，就像有些人在评论中说的那样，但我更喜欢左对齐只有一些填充。

Answer 1

我不确定这是不是你的意思，但这里是你如何将文本放在行中心。

一个例子来自：

＆＃13;

＆＃13;

table {
    border-collapse: separate;
    border-spacing: 0 1rem;
    font-size: 85%;
}

th {
    letter-spacing: 1px;
    padding-left: 1rem;
    border: 0;
}

tr {
    letter-spacing: 1px;
    padding-left: 1rem;
    border: 0;
}

td {
    border-radius: 5px;
    border: 0;
}
.text-center{
  text-align: center;
}
tbody tr:nth-child(odd) {
  background-color: grey;
}

＆＃13;

<table class="content-table">
    <thead>
        <tr>
            <th><strong>Name</strong></th>
            <th class="text-center"><strong>Age</strong></th>
            <th class="text-center"><strong>Height</strong></th>
            <th><strong>Location</strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stephen Curry</td>
            <td class="text-center">27</td>
            <td class="text-center">1,91</td>
            <td>Akron, OH</td>
        </tr>
        <tr>
            <td>Klay Thompson</td>
            <td class="text-center">25</td>
            <td class="text-center">2,01</td>
            <td>Los Angeles, CA</td>
        </tr>
        
                <tr>
            <td>Klay Thompson</td>
            <td class="text-center">25</td>
            <td class="text-center">2,01</td>
            <td>Los Angeles, CA</td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，我已经将class称为.text-center，并将其附加到我理解为您想要居中的列。您可以为-right和-left对齐创建相同的类。并将一些标签更改为 th中的tr到tbody。我希望这就是你的意思。

Answer 2

不确定这是否是你想要获得的，但这可以达到你在上面的上图中所显示的效果。

＆＃13;

＆＃13;

table {
border-collapse: collapse;
width:100%;
padding-left:20px;
padding-right:20px;

}

td, th {

padding: 12px;
}

tr:nth-child(even){background-color: #f2f2f2;}


th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: white;
color: black;

＆＃13;

<table class="content-table">
    <thead>
        <tr>
            <th><strong>Name</strong></th>
            <th><strong>Age</strong></th>
            <th><strong>Height</strong></th>
            <th><strong>Location</strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stephen Curry</td>
            <td>27</td>
            <td>1,91</td>
            <td>Akron, OH</td>
        </tr>
        <tr>
            <td>Klay Thompson</td>
            <td>25</td>
            <td>2,01</td>
            <td>Los Angeles, CA</td>
        </tr>
<tr>
            <td>Stephen Curry</td>
            <td>27</td>
            <td>1,91</td>
            <td>Akron, OH</td>
        </tr>
        <tr>
            <td>Klay Thompson</td>
            <td>25</td>
            <td>2,01</td>
            <td>Los Angeles, CA</td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;