代码之家  ›  专栏  ›  技术社区  ›  p0tta

以左侧td为中心的基本html表

  •  0
  • p0tta  · 技术社区  · 12 年前

    我有一张桌子,我将尝试用这种方式表示:

    -------------------------
    | L1 |       R1         | 
    ------------------------  
    | L2 |       R2         |
    -------------------------
    

    我的代码如下:

    <div data-role="content" id="div1" align="top" style="padding:3 !important;" >  
            <table border="0" align="CENTER" cellspacing="0" width="100%" style="vertical-    align: text-bottom;" >
            <tr>
            <td></td>
            <td>
                <div id="question1" class="question">
                    <input type="text" id="question" />
                <Style>
                    #question{
                      font:5px;
                      font-family:verdana;
                    }
                </style>        
                </div>
            </td></tr><tr>
            <td width="50"><img id="img2" width="40" height="36" style="float:right; margin-top: 0px;" ></td>
            <td style="text-align:center;">
                <div class="ui-grid-b" >
                    <div class="ui-block-a"><button id="button1" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>
                    <div class="ui-block-b"><button id="button2" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>   
                    <div class="ui-block-c"><button id="button3" type="submit" data-theme="b" style="font-size:0.8em;"></button></div>  
                </div>
            </td>
            </tr>
            </table>
    </div>
    

    所以基本上我想做的是,我的表中没有L1部分。R1有数据,R2也有数据。L2中有一个图像。我想做的是去除L1和L2之间的分割,L2中的图像应该以表为中心,而不仅仅是L2的TD。我该怎么做?

    我还有一个问题,在下面的代码行中:

    <input type="text" id="question" />
    

    当填充值时,当我在手机中查看时,文本有时会转到下一行。我认为textarea是唯一一个有多行的HTML标记。不确定为什么这里的文本是多行的,我该如何避免它?

    1 回复  |  直到 8 年前
        1
  •  1
  •   Mathijs Flietstra    12 年前

    看到下面这一点 <table border="0"....

    <tr><td></td>
    

    将其更改为

     <tr>
       <td width="50" rowspan="2">
         <img id="img2" width="40" height="36" style="float:right; margin-top: 0px;">
       </td>
    

    然后摆脱 <td></td> 最初持有该图像的。