固定配置されたテーブルセルの内容を右側に揃えますか？

固定位置のテーブルセルの内容を右側に揃えることは可能ですか？固定配置されたテーブルセルの内容を右側に揃えますか？

デモを確認してください - 黄色の3番目のボックスは反応する白い容器の右側に付いてください。

固定位置とテーブルセルは保管してください。おかげ

body { 
 
    background-color: grey; 
 
} 
 
.container { 
 
    width: 100%; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
    max-width: 80%; 
 
} 
 
table { 
 
    width: 100%; 
 
} 
 
.first { 
 
    ; 
 
    position: fixed; 
 
    background-color: red; 
 
} 
 
.second { 
 
    width: 50%; 
 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
} 
 
.third { 
 
    text-align: right; 
 
    position: fixed; 
 
    background-color: yellow; 
 
}

<body> 
 
    <div class="container"> 
 
    <table> 
 
     <tr> 
 
     <td class="first">First</td> 
 
     <td class="second">Second</td> 
 
     <td class="third">Third</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</body>

出典

2016-07-08 Adyyda

私はあなたが固定位置を維持する持っていることを書いて知っているが、固定位置テーブルセルは非常に奇妙な概念であり、そして私はこれがあるため、すべてのブラウザで異なって見えることを期待します固定された配置された要素の位置は、通常、ビューポート（ウィンドウ）にのみ関連し、テーブル内では役に立たない。

以下の解決法では、第1および第3のセルwidth: 25%をその内容とは無関係にして、その内容をセル幅全体に背景色を広げることなくテキスト整列作業にするようにしました。これがあなたに役立つことを願っています。

body { 
 
    background-color: grey; 
 
} 
 
.container { 
 
    width: 100%; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
    max-width: 80%; 
 
} 
 
table { 
 
    width: 100%; 
 
} 
 
.first { 
 
    width: 25%; 
 
} 
 
.first > span { 
 
    background-color: red; 
 
} 
 
    .second { 
 
    width: 50%; 
 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
} 
 
.third { 
 
    width: 25%; 
 
    text-align: right; 
 
} 
 
.third > span { 
 
    background-color: yellow; 
 
}

<body> 
 
    <div class="container"> 
 
    <table> 
 
     <tr> 
 
     <td class="first"><span>First</span></td> 
 
     <td class="second">Second</td> 
 
     <td class="third"><span>Third</span></td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</body>

出典

2016-07-08 16:31:50 Johannes

固定位置とテーブルセル彼らは固定に変更し、それが今であるとして、クロム、FirefoxとSafariで正常に動作ヘッダーのために使用されているので、私のためである必要がありますされています。モバイルデバイスのブラウザでは、レイアウトが変更されるため、問題はありません。 – Adyyda

固定配置されたテーブルセルの内容を右側に揃えますか？

答えて

関連する問題