ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS ネストされたテーブルの中央揃え問題_html/css_WEB-ITnose

CSS ネストされたテーブルの中央揃え問題_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-06-24 12:18:021354ブラウズ

常識によれば、親テーブルの tr または td に text-align:center を設定して中央に配置するだけです。ただし、VS デザイナーでは中心にありますが、ブラウザでは中心にありません。 ffで中央揃えにならないのは分かりますが、IEでも中央揃えにならないだけでも不可解です。

<tr style="text-align:center">                <td>                    <table style="border-collapse:collapse">                        <tr style="text-align:center;">                            <td style="border:solid #000 1px">单位工程数量</td>                            <td style="border:solid #000 1px">总建筑面积</td>                            <td style="border:solid #000 1px">单价(元/平)</td>                            <td style="border:solid #000 1px">小计</td>                        </tr>                        <tr>                            <td style="border:solid #000 1px"><input id="txt_UnitNum" type="text" class="txtInTab" runat="server" style="text-align:center; background-color: #e6eae9;"/></td>                            <td style="border:solid #000 1px"><input id="txt_AreaNum" type="text" class="txtInTab"  runat="server" style="text-align:center; background-color: #e6eae9;"/></td>                            <td style="border:solid #000 1px"><input id="txt_UnitPrice" type="text" class="txtInTab" runat="server" style="text-align:center; background-color: #e6eae9"/></td>                            <td style="border:solid #000 1px"><input id="txt_Total" type="text" class="txtInTab" readonly="readonly" runat="server" style="text-align:center; background-color: #e6eae9"/></td>                        </tr>                        <tr>                            <td style="text-align:center;border:solid #000 1px">合计</td>                            <td colspan='2' style="border:solid #000 1px;">大写:<input id="txt_Cap" type="text" class="txtInTab" readonly="readonly" runat="server" style="width: 255px; background-color: #e6eae9" /></td>                            <td style="border:solid #000 1px"><input id="Text9" type="text" class="txtInTab" readonly="readonly" runat="server" style="background-color: #e6eae9"/></td>                        </tr>                    </table>                </td>            </tr>

親要素から継承されていると言われたら、親要素には何も書かれていません
外側のテーブルにはもう 1 文
style="margin-left:auto; margin-right:auto"
があるだけです
本体は言うまでもありません。背景色と前景色のみが設定されていますが、内部のテーブルを中央に配置できません。分析を手伝ってください~ありがとう


ディスカッション (解決策) に返信

オンラインで解決してください!ちょっとした提案でも構いません~

tr に center を追加しないでください

td style="text-align:center" に追加してください

td style="text-align:center" に追加してください 効果は同じ 。以前試してみました

最外層は div です
2ab68eb3eefc80b36cbdfdb088e529c6
2bdf525cac91d7980748c249b08d5742
これで中央揃えになります

えー

スタイル text-align:center をサブテーブルに追加するだけです

常識的には...
常識に基づいてはいけません

b6c5a531a458a2e790c1fd6421739d1c
b90dd5946f0946207856a8a37f441edf試してみてください

2ec64baab3da16c5417afd0099669d4d
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c3de74377fb72a0da0e611659cb343fb6
2f1140688e2520dcd359a744370efa36
65b1bf6a55a9a8553709e567f2209ea4单位工程数b90dd5946f0946207856a8a37f441edf
65b1bf6a55a9a8553709e567f2209ea4总建設面积b90dd5946f0946207856a8a37f441edf
65b1bf6a55a9a8553709e567f2209ea4单价(元/平)b90dd5946f0946207856a8a37f441edf
65b1bf6a55a9a8553709e567f2209ea4小计b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
65b1bf6a55a9a8553709e567f2209ea44d26bd2bbb67544e50d01aefeb3857f0b90dd5946f0946207856a8a37f441edf
65b1bf6a55a9a8553709e567f2209ea41dd4a9fdb123288712001af28c1ed29ab90dd5946f0946207856a8a37f441edf
65b1bf6a55a9a8553709e567f2209ea4ba19b25b061954c35c37cb0839e64baeb90dd5946f0946207856a8a37f441edf
65b1bf6a55a9a8553709e567f2209ea444057c04d8c3260fbb16cb37a7079abfb90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
89de46a198032e58b11ea368024c2b2d合计b90dd5946f0946207856a8a37f441edf
8bbad9ab6cdf9f68a57253fb26dc6e22大写:
fd754bca75ea829e4e4383925db548a6b90dd5946f0946207856a8a37f441edf
65b1bf6a55a9a8553709e567f2209ea4
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
271cb3d2ff227ca6331ee41e81293d65

60dcd88a9e934d90545c09b299899f28

f24b767dca9c8be205a96c4514d7196e
不一样、不信你可试试

2279aae5d7ea64621b2119f85dfad503
b6c5a531a458a2e790c1fd6421739d1c
6523e524247d3d016148972e3558224a -テーブルで十分です。
以前は中央揃えにできなかった理由は、おそらく text-align がブロック レベルの要素に作用できないためであり、テーブルでは機能しません。

2279aae5d7ea64621b2119f85dfad503

b6c5a531a458a2e790c1fd6421739d1c 6523e524247d3d016148972e3558224a内部では、display:inline-table; を使用するだけです。

以前に中央揃えにできなかった理由は、おそらく text-align がブロックで機能しないためです...わかりました、ありがとう

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。