0

グリッド

このテーブル レイアウトを作成しようとしています。基本的18に、グリッドに表示されているオレンジ色は、火曜日の午前 11 時から午後 12 時までの使用率が 18% であることを意味します。そのため、上部にある時間は、セルの中央ではなく、表のセルの端に最適です。このようにして、1 時間の範囲での使用状況を表すデータが表示されます。

私は基本的に基本的なハックを適用し、上部に沿って時間を右揃えにして、セルの間にあるように見えるようにしました. ご覧のとおり、これは完全ではありません。

私がやりたいことは、実際にはデータ セルの間の中央にある上部に沿って時間を表示することです。固定サイズの列幅でそれを行うことができると思いますが、テーブルはページ幅の 100% に拡大し、列幅はパーセンテージで拡大する必要があります。それから、より小さなブラウザーにまで拡張可能です。

HTMLとCSSでこれを行う方法はありますか?

4

5 に答える 5

1

相対配置された要素内で絶対配置された要素を使用して、必要な効果を得ることができます。アイデアは、 で<th>要素のスタイルを設定してから、要素position: relative内の時間番号自体を でスタイルすることposition: absoluteです。その後、セルに対して任意の場所に数値を配置できます。

jsfiddleの例を次に示します。数値の位置を調整するには、ブロックright内のプロパティのパーセンテージではなくピクセル値を使用することをお勧めします。th > span

詳細については、さまざまな配置方法についてお読みください。

于 2013-01-31T22:38:27.423 に答える
1

を使用position: relative;して月の数字を好きな場所に配置できますが、表のセルが CSS の配置で奇妙に動作することが多いため、注意が必要です。また、正確な配置は、使用するフォントによって異なります。

2 つのテーブルを必要とするソリューションを思いつきました。アイデアは、見出し用に 1 つのテーブル、コンテンツ用に 1 つのテーブルを用意することです。秘訣は、見出しのセルを 1 つ少なくすることです。

実際の例: http://jsfiddle.net/w6TnE/

ご覧のとおり、月の数字は境界線と完全に一致しています。ただし、この設定には固定幅(この場合は 60px)が必要であることに注意してください。

td, th{ border:1px solid #ccc; padding:5px 0; text-align:center; width:60px;}

明確にするために、いくつかのスタイルを追加しました。

于 2013-01-31T22:32:30.920 に答える
1

1 つのテーブルで最初の行を真に下のセルの中央に配置するには、配置を使用せずに colspan + widths をパーセンテージで使用できます。そうすれば、流動的になり、どのフォントでも機能し、2 桁の数字を使用しても混乱しません。

HTML:

<table border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td>&nbsp;</td>

            <th colspan="2">1</th>

            <th colspan="2">1</th>

            <th colspan="2">1</th>

            <th colspan="2">1</th>

            <th colspan="2">1</th>

            <td>&nbsp;</td>
        </tr>

        <tr>
            <td colspan="2">0</td>

            <td colspan="2">0</td>

            <td colspan="2">0</td>

            <td colspan="2">0</td>

            <td colspan="2">0</td>

            <td colspan="2">0</td>
        </tr>
    </tbody>
</table>

CSS:

table {
    text-align: center;
    width: 70%;    
    }

table td {
    width:8.33%; // 100% divided by (double the number of bottom cells)
}

table th {
    width:16.66%; // 200% divided by (double the number of bottom cells)
}

table td[colspan="2"] {
    background:yellow;
}

table td,
table th {
    outline:1px solid tan;
}

デモ: http://jsfiddle.net/G7KZe/

于 2013-01-31T23:00:39.423 に答える
1

テーブルの各見出しテキストを常にタグのようにラップし、<div>cssまたは任意の数のピクセルを使用して見栄えを良くすることができます。position:relativeleft:2px

例

<table>
  <tr>
    <th style="text-align:right;"><div style="position:relative;left:2px;">1</div></th>
  </tr>
</table>
于 2013-01-31T22:23:01.177 に答える
0 
table td{ text-align:center;}

これにより、各セルのテキストが中央に配置されます。

于 2013-01-31T22:25:07.987 に答える