Home > Article > Web Front-end > CSS nested table centering problem_html/css_WEB-ITnose
CSS nested table centering problem_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:18:021299browse
According to common sense, just set text-align:center in the tr or td of the parent table to center it. But it is centered in the VS designer, but not in the browser. It's understandable that it's not centered in ff, but it's puzzling even in 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>
If someone says it is inherited from the parent element, then there is nothing written in my parent element
There is just one more sentence in the outer table
style="margin-left:auto; margin-right:auto"
Not to mention body . Only the background and foreground colors are set
body { font: normal 9pt auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; background: #E6EAE9; margin:0 auto; }But the table inside cannot be centered. Please help me analyze it~Thank you Reply to the discussion (solution)
Solve online! Even a little suggestion will do~
Don’t add center in tr
Add it to td style="text-align:center"
Add it to td Inside style="text-align:center" has the same effect. I tried it earlier
The outermost layer is a div
2ab68eb3eefc80b36cbdfdb088e529c6
254ecb4e027bccaed9ab6d49b2a800c3
This way it will be centered
<tr style="text-align:center"> <td> <table style="text-align:center;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>
Add styles to the subtable text-align:center will do
According to common sense...
You can’t follow common sense
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c
ab5fd8bc6207a6e35841db890d0a3295f16b1740fad44fb09bfe928bcc527e08
b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
Try it
f5d1986861bcda767b0a574b0b21966c
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1ce976ceebb48c4fce36cd0627c0cfed96
bee8808d3ebbb607a01c28979712b60e
f1f07d75f41c53a87ec0a7b14f03841a单位工程数量b90dd5946f0946207856a8a37f441edf
f1f07d75f41c53a87ec0a7b14f03841a总建筑面积b90dd5946f0946207856a8a37f441edf
f1f07d75f41c53a87ec0a7b14f03841a单价（元/平）b90dd5946f0946207856a8a37f441edf
f1f07d75f41c53a87ec0a7b14f03841a小计b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
f1f07d75f41c53a87ec0a7b14f03841a84a1c47a1f932d19795b2c204b1d7454b90dd5946f0946207856a8a37f441edf
f1f07d75f41c53a87ec0a7b14f03841ab8d3460bc4be85f9fbc99389363eeae0b90dd5946f0946207856a8a37f441edf
f1f07d75f41c53a87ec0a7b14f03841aea03525b29e757ab0a358ea1fa0dee4db90dd5946f0946207856a8a37f441edf
f1f07d75f41c53a87ec0a7b14f03841af73996255527a15ed44b6f2e50e8c2f1b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
3fb9a28139b155ee631bf334e8c8698e合计b90dd5946f0946207856a8a37f441edf
b94cb2c887e6c04b2fb10872a83a69ac大写：
21b751aefbfd41feda3ffcbedd3f12bbb90dd5946f0946207856a8a37f441edf
f1f07d75f41c53a87ec0a7b14f03841ac0069d2cdc6d4b474cf99223f0097302b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08b90dd5946f0946207856a8a37f441edf
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
3d54ee7ba2ce937d13c225a8fb02e9e9
和
15d4135fb3d674bc4efa0ec44209c844
不一样，不信你可以试试
2279aae5d7ea64621b2119f85dfad503
b6c5a531a458a2e790c1fd6421739d1c
6523e524247d3d016148972e3558224a
Just add display:inline-table; to the table inside.
The reason why it could not be centered before was probably because text-align cannot act on block level elements, so it does not work on tables.
2279aae5d7ea64621b2119f85dfad503
b6c5a531a458a2e790c1fd6421739d1c