1

我有一些 CSS 主题，我想对表头做一些实际不支持的表头。（太好了，对吧？！）

所以我的想法是在表头后面添加一个元素并将主题应用于它！

然而，我尝试添加带有负 z-index 的表、tbodies、theads、th's 或 td's 都失败了。

另一方面，我可以将我的表头放在它自己的表中，然后封装表并在其上进行主题化...但是我的表头中的 th 不会与我的 tbody 中的 td 对齐！我无法封装 tbody 或 td's/tr，因为当不被 td 或 tr 封装时，表中不允许 div ......

我想做的效果是：设置边框宽度和颜色设置边框半径设置背景图像和颜色

边界半径是行不通的

有任何想法吗？

4

2 回答 2

4

我不确定这是您要查找的内容，但您可以使用“th”元素为表头设置 CSS。例如。尝试以下实现，

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

td
{
border:1px solid black;
}
thead th
{
border:1px solid green;
}
thead th:first-child
{
border-radius:12px 0px 0px 12px;
}
thead th:last-child
{
border-radius:0px 12px 12px 0px;
}
</style>
</head>

<body>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Middlename</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>Griffin</td>
</tr>
</tbody>
</table>
</body>
</html>

请检查链接。

您还可以使用 CSS3 设置边框半径。

border-radius:10px 0 0 10px;

如果跨浏览器兼容性是一个问题，您可以使用圆形图像作为背景。

于 2012-07-18T04:39:54.780 回答
0

一般技巧是格式化末端<th>单元格，使它们仅在一侧具有圆形边缘。以下是 webkit 浏览器的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Table Head CSS</title>
    <style type='text/css'>
      table{
      border-spacing: 0;
      }
      th.left{
      margin-right: 0;
      padding-right: 0;
      border-width:2px 0 2px 2px;
      border-style: solid;
      -webkit-border-top-left-radius: 5px;
      -webkit-border-bottom-left-radius: 5px;
      }
      th.middle{
      margin: 0;
      padding: 0;
      border-width:2px 0 2px 0;
      border-style: solid;      
      }
      th.right{
      margin-left: 0;
      padding-left: 0;
      border-width:2px 2px 2px 0;
      border-style: solid;
      -webkit-border-top-right-radius: 5px;
      -webkit-border-bottom-right-radius: 5px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
    <tr>
      <th class='left'>Test</th><th class='middle'>Test 2</th><th class='right'>Test 3</th>
    </tr>
      </thead>
      <tbody>
    <tr>
      <td>data</td><td>data 2</td><td>data 3</td>
    </tr>
      </tbody>
  </body>
</html>
于 2012-07-18T05:07:22.913 回答