1

テーブルのヘッドが実際にはサポートしていないテーブルのヘッドに対して実行したいCSSテーマがいくつかあります。（素晴らしいですよね？！）

だから私のアイデアは、テーブルヘッドの後ろに要素を追加し、それにテーマを適用することでした！

ただし、負のzインデックスを持つテーブル、tbodies、theads、th、またはtdを追加しようとしても、すべて悲惨なことに失敗しました。

反対に、テーブルヘッダーを独自のテーブルに配置し、テーブルをカプセル化して、その上でテーマを設定することもできます...しかし、ヘッダーのthは、tbodyのtdと整列しません。tdまたはtrによってカプセル化されていない場合、テーブル内でdivが許可されないため、tbodyまたはtd's/trをカプセル化できません。

私がやりたい効果は次のとおりです。境界線の幅と色を設定する境界線の半径を設定する背景画像と色を設定する

境界線の半径は機能しないものです

何か案は？

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 に答える