0

スタイル.css

.headerBar table,tr,td{
    background-color: #f1f1f1;
    width: 100%;
    height: 44px;
    border: 0px;
    padding:0px;
    margin:0px; 
}

video.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="headerBar">
                <table>
                <tr>
                    <td>
                     FILL
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

質問 1: 表をページの幅いっぱいに広げたいのですが、そうではありません。解決した

質問 2: テーブルをページの一番上に配置したいので、テーブルの上、左、または右に境界線や余白はありません。 解決した

質問 3: これを行うためのより良い方法はありますか? HTML5 の新しいものを使用している可能性がありますか?

ありがとう！

4

6 に答える 6

1

境界線、パディング、または幅なしで上部に配置するには、次のようにします。

フィドル

<div class="headerBar">
    <table>
        <tr>
            <td>FILL</td>
        </tr>
    </table>
</div>

.headerBar table, tr, td {
    background-color: #f1f1f1;
    width: 100%;
    height: 44px;
    border: 0px;
    padding:0px;
    margin:0px;
    position:fixed; /** or absolute, depending on what you are trying to accomplish **/
    top:0;
    left:0;
}

はい、スタイリングやレイアウトにテーブルを使用するべきではありません。だけで同じことを達成できますdivs

<div class="headerBar">
    FILL
</div>

/ ** 編集 ** /

3 番目の質問に答えるには、はい、これを行うためのはるかに優れた方法があります...必ずしも HTML5 を必要とするわけではありませんが、HTML の優れた実践のみが必要です。プロジェクトが十分に大きい場合 (場合によってはそうでない場合でも)、Twitter Bootstrapのようなフロントエンド フレームワークを使用することができ、おそらく使用する必要があります。あなたが始めました。

于 2013-08-01T18:13:02.177 に答える
1

まず、多くの理由からa のdiv代わりに aを使用することをお勧めしますが、それは私だけです。table

Adivを使用すると、意志以上のことを行うことtableができ、数か月後に編集する必要がある場合でも、混乱がはるかに少なくなります。

HTML ページ

<header>
    <p> My text here </p>
</header>
<div class="widthS">
    <p> Whatever you are trying to put here </p>
</div>
<footer>
    <p> Copyright </p>
</footer>

CSSページ

.widthS {
background: #f1f1f1;
width: 100%;
height: 44px;
border: 0px;
padding:0px;
margin:0px;
}

box-shadow: 0px 1px 2px #2b2b2b;またはborder-radius: 7px 7px 0 0;またはなどの非常に楽しい css 機能を追加できるようになりましopacity: 0.5;た。最初のものは、要素にほぼ90 度の角度のドロップ シャドウを追加し、上隅に曲線のエッジを追加します。これにより、要素を透明にすることができます。

于 2013-08-01T18:35:05.393 に答える
0

あなたはまだ2と3の答えが必要だと言いました、これを試してください：

body {
  margin: 0;
  padding: 0;
}

もう国境はないはず

于 2013-08-01T18:12:46.047 に答える
0

3 番目の質問: テーブルで何をしたいかによって異なります...要素を正しい位置に配置するためだけに使用する場合は、代わりに div-elements と css を使用する必要があります。;)

于 2013-08-01T18:15:54.050 に答える