创建透明的 HTML 表格 [关闭]答案

【问题标题】：Create transparent HTML table [closed]创建透明的 HTML 表格 [关闭]
【发布时间】：2015-08-01 19:17:45
【问题描述】：

我想像这个例子一样创建 HTML 表格。

我怎样才能使标题保持灰色并使数据看起来一样？

【问题讨论】：

标签： css html

【解决方案1】：

您只需在要显示的元素上设置背景颜色。

这没有什么复杂的。

table, tbody, tr, th, td { background: transparent; }
thead { background: #aaa; }

【讨论】：

【解决方案2】：

试试这个：

CSS:

table {
    border-collapse: collapse;
}

table th, table thead tr {
    background: #ccc;
    font-weight: bold;
}

table tr td:first-child {
    font-weight: bold;
}

table tr td {
    background-color: transparent;
}

Example HTML:

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
    </tbody>
</table>

JSFiddle

【讨论】：

【解决方案3】：

您可以使用 css 设置表格标题的样式

<table>
    <tr>
        <th>header</th>
        <th>header</th>
    </tr>
    <tr>
        <td>content</td>
        <td>content</td>
    </tr>
</table>

th { background-color: #ff0000; }

或者看这个小提琴：http://jsfiddle.net/h4817knp/6/

编辑：为了避免标题中的空白添加

table { border-collapse: collapse; }

到css

http://jsfiddle.net/1yn99g13/1/

【讨论】：

标题单元格之间有间隙，不在问题中。
该代码在语法上不正确
语法错误到底是什么？
所有td和th元素都应该放在<tr></tr>w3schools.com/html/html_tables.asp中
我已经删除了我的反对票:)

【解决方案4】：

当然，你应该使用 CSS：

需要去掉表格中的默认间距：

table {
    border-collapse: collapse;
    border-spacing: 0;
}

需要设置表头元素的背景颜色：

table thead {
    background-color: lightgrey;  
}

您需要定义单元格大小：

td {
    width: 100px;  
    height: 25px;
}

Working Fiddle

table {
    border-collapse: collapse;
	border-spacing: 0;
}
td {
    width: 100px;  
    height: 25px;
}
table thead {
    background-color: lightgrey;  
}

<table>
    <thead>
        <tr>
            <td>HeaderA</td>
            <td>HeaderB</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>Value</td>
        </tr>
    </tbody>
</table>

【讨论】：

【解决方案5】：

这是一个有效的 sn-p。

border-spacing 删除单元格之间的间距
tr:first-of-type 只针对第一行应用背景颜色
td:nth-child(odd) 仅定位第一列以使所有字段变为粗体

table{
  border-spacing:0;
}

tr:first-of-type{
  background:lightgray;
  }

td:nth-child(odd){
  font-weight:bold;
}

th,td{
  padding:5px;
}

<table>
  <tr>
    <td>Plan / Feature</td>
    <td>Standard</td>
  </tr>
  <tr>
    <td>Plan Type</td>
    <td>Annual</td>
  </tr>
  <tr>
    <td>Email Support</td>
    <td>Yes</td>
  </tr>
</table>

【讨论】：