浏览器在表标记内部出现HTML标题标记问题

时间:2014-04-25 07:20:25

标签: javascript css jsp cross-browser html4

表标记内的Html Caption标记问题。问题在于对齐。

<html:form action="myAction">

<table border=0 id="main_table" width="100%">
       <tr>
          <td>
             <table id="t1" width="100%">
                <caption align= "left" id="t1_c">
                  <b><bean:message key="schedule.automatic"/></b>
                </caption>
             <tr>
                <td>
                   <label>
                       <input type=radio name="gather_group" value='NEVER'        onclick="selectRadio(this.value)">
                          <bean:message key="myconsole.schedule.never"/>
                   </label>
               </td>
             </tr>
            </table>
          </td>
            <table id="t2" width="100%">
               <caption align="left" id="t2_c">
                 <b><bean:message key="schedule.whenToGather"/></b>
               </caption>
               <tr id="t2_r1">
                 <td><bean:message key="schedule.hourOfDay"/></td>
               </tr>
            </table>
      </tr>

我认为caption标签在不同浏览器中运行时遇到问题。 使用bean:message属性显示的文本在IE8及更高版本中完美显示,但在firefox版本-28.0中,chrome,safari ..文本位置移位。

感谢任何帮助。

注意:我没有使用HTML5

2 个答案:

答案 0 :(得分:1)

第二个嵌套表不在td标记内:

<table border=0 id="main_table" width="100%">
   <tr>
      <td>
         <table id="t1" width="100%">
            <caption align= "left" id="t1_c">
              <b><bean:message key="schedule.automatic"/></b>
            </caption>
         <tr>
            <td>
               <label>
                   <input type=radio name="gather_group" value='NEVER'        onclick="selectRadio(this.value)">
                      <bean:message key="myconsole.schedule.never"/>
               </label>
           </td>
         </tr>
        </table>
      </td>
      <td> <!-- Missing td tag -->
        <table id="t2" width="100%">
           <caption align="left" id="t2_c">
             <b><bean:message key="schedule.whenToGather"/></b>
           </caption>
           <tr id="t2_r1">
             <td><bean:message key="schedule.hourOfDay"/></td>
           </tr>
        </table>
      </td> <!-- Missing td closing tag -->
  </tr>

答案 1 :(得分:0)

  

我已经得到了修复本身,使用这样的内联样式属性..

<caption align= "left" id="t1_c" style="caption-side: top; width: auto; text-align: left;">
  

感谢所有人。