HTML 表 : Black background tr on white background

标签 html css html-table

我想要一个有 tr 作为黑色背景的表格,里面有一个白色背景的表格。

<table width="560" cellspacing="0" cellpadding="0" border="0" style="background: #FFFFFF;margin: 0 auto !important; padding-left: 20px; padding-right: 20px; width:560px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"  >
                            <tbody>
                            <tr>
                                <td>
                                    <table width="560" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto !important; width:560px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"  >
                                        <tbody>
                                        <tr>
                                            <td height="40" valign="top" align="center" style="width: 100%; background: #000000; text-align: left; padding-left: 40px; padding-top: 10px;">
                                                <span style="color: white;">5th Mar, 2016</span>

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

                        </table>

我想要图像中显示的输出。

Here is the image

谢谢。

最佳答案

希望对您有所帮助

HTML 代码

<table width="560">
 <tbody>
    <tr>
        <td>
            <span>5th Mar, 2016</span>
        </td>
    </tr>
  </tbody>
</table>

CSS 代码

table {
  background-color: #fff;
  padding: 5px
}

table, th, td {
 color: #fff;
  border: 1px solid black;
}

table tr {
  background-color: #000;
}

关于HTML 表 : Black background tr on white background,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39220374/

相关文章:

javascript - 水平滚动容器内的垂直滚动 div

html - 我正在尝试调整我的图像大小以适合我的导航栏正上方所以它不是那么大?

javascript - Android 2.X 上的数字 9

css - HTML5/CSS : How to prevent stacking inside a div?

css - 将一个 div 在另一个 div 内居中 - 对齐中心

html - 高度 :auto overrides all height styles

html - CSS/HTML - 嵌套表格的问题

html - 如何让表格居中

html - CSS 将图标移动到输入字段的右侧

javascript - 从id中删除表内容