简体   繁体   English

使用CSS更改HTML表格标题BG颜色

[英]Change HTML Table Caption BG Color With CSS

Can the background color on a table's caption be changed with CSS? 可以使用CSS更改表格标题上的背景颜色吗?

The captions on my tables are currently using the background behind them and I would like to make the caption's background a different color. 我桌子上的标题当前正在使用它们后面的背景,我想使标题的背景具有不同的颜色。 If so what is the CSS property ? 如果是这样,CSS属性是什么?

Here is my current CSS 这是我目前的CSS

.Table {
margin:0px;padding:0px;
width:100%;
border:1px solid #4c4040;

-moz-border-radius-bottomleft:8px;
-webkit-border-bottom-left-radius:8px;
border-bottom-left-radius:8px;

-moz-border-radius-bottomright:8px;
-webkit-border-bottom-right-radius:8px;
border-bottom-right-radius:8px;

-moz-border-radius-topright:8px;
-webkit-border-top-right-radius:8px;
border-top-right-radius:8px;

-moz-border-radius-topleft:8px;
-webkit-border-top-left-radius:8px;
border-top-left-radius:8px;
}

.Table table{
border-collapse: collapse;
    border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}

And my HTML 还有我的HTML

<div class="Table" >
    <table align='center'  summary='blank Sum'>
      <caption><br>
      Please enter the Emails  of the people you want to invite.
      <br> <br>
      </caption>
      <tr>
        <td>Party ID</td><td>Party Name</td><td>Date</td><td>Sales</td>
        <td>blah</td>    <td>blah</td>      <td>blah</td><td>blah</td>
      </tr>     
    </table>

</div>

Quick answer 快速回答

Have a fiddle! 小提琴!

CSS CSS

table caption { background: #F00; }

Slower Answer 较慢的答案

The .Table div seems superfluous. .Table div似乎是多余的。 I would have something like this: 我会有这样的事情:

Have a fiddle! 小提琴!

HTML HTML

<table summary='blank Sum'>
  <caption>
  Please enter the Emails  of the people you want to invite.
  </caption>

    <thead>
        <tr>
            <th>Party ID</th>
            <th>Party Name</th>
            <th>Date</th>
            <th>Sales</th>
        </tr>
    </thead> 

    <tbody>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
    </tbody>   
</table>

CSS CSS

table { 
    width: 500px; /* whatever width */
    margin: 0 auto; /*center table*/
}

table caption { 
    padding: 10px;
    background: #F00;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM