使HTML表行独立于其他行的宽度。顶行确定行宽

时间:2016-02-22 16:46:04

标签: html html-table html-formatting

我有一个我想要设置的表。标题橙色文本应该自由流动,但只是第二行第一列的宽度。但是第二行的第二列宽度由其正上方的行确定。这里好像没有任何押韵也没有理由。

如何调整标题文本以填充我指定的完整100%宽度并将其下方的行调整为彼此相对,并且每列基本上有15%而不是第二列近50%到期到设施选项卡下拉。

我已尝试将这些<td>数据的位置设置为绝对值或固定值,或者将左侧浮动数据设置为不成功。我也试过设置align =“left”,这样他们就可以尝试在左侧,没有运气。

如果删除设施<tr>行,则第一行等于标题,这不是集中的,并且使第一行的宽度为40%,而不是我设置的20%。

<body>
<table border="1" width="100%" table-layout="fixed" border-spacing="0";
 border-collapse="collapse">
 <div align="right">
 <form name="spdAdmin" method="post" onSubmit="return validateForm(this);"  action="SlidingScaleFeeMaint.jsp">

<thead>
     <tr>
    <td width="100%"><H1>Create New Sliding Scale Fee Ranges</H1></td>
</tr>

<tr>
    <td align="center">&nbsp;</td>
    <input name="user" type="hidden" value="" size="10"/>
    <input name="todaysdate" type="hidden" value="" size="10"/>
    <input name="prevdate" type="hidden" value="" size="10"/>
</tr>

<tr align="left">

    <td  width="20%" align="center" CLASS="L1">Facility:</td>

     <td width="80%"><%= clinicMgr.getClinicDDLB(userId, 2514, "", "", "clinicId") %></td>
</tr>

<tr>
    <td align="center">&nbsp;</td>
</tr>
</thead>

<tbody>

    <tr>
    <td align="center" width="20%" CLASS="L1" >1st Range: Rxs </td>
        <td width="15%">
           <input name="range1" value="" size="10"/>
        </td>
        <td width="5%"align="center" CLASS="L1" > to </td>
        <td>
           <input width="15%" name="range1" value="" size="10"/>
        </td>

        <td width="5%" align="center" CLASS="L1" > @ </td>
        <td>
           <input name="range1" value="" size="10"/>
        </td>

    <td width="5%" align="center" CLASS="L1">1st Cost:</td>
    <td width="15%">
        <input name="cost1" value="" size="10"/>
    </td>
   </tr>

   <tr>
    <td align="center" CLASS="L1" >1st Range: Rx </td>
        <td>
           <input name="range1" value="" size="10"/>
        </td>
        <td align="center" CLASS="L1" > to </td>
        <td>
           <input name="range1" value="" size="10"/>
        </td>

        <td align="center" CLASS="L1" > @ </td>
        <td>
           <input name="range1" value="" size="10"/>
        </td>
   </tr>

   <tr>
    <td align="center" CLASS="L1" >2nd Range:</td>
        <td>
           <input name="range1" value="" size="10"/>
        </td>

    <td align="center" CLASS="L1">2nd Cost:</td>
    <td>
        <input name="cost1" value="" size="10"/>
    </td>
   </tr>

          <tr>
    <td align="center" CLASS="L1" >3rd Range:</td>
        <td>
           <input name="range1" value="" size="10"/>
        </td>

    <td align="center" CLASS="L1">3rd Cost:</td>
    <td>
        <input name="cost1" value="" size="10"/>
    </td>
   </tr>

          <tr>
    <td align="center" CLASS="L1" >4th Range:</td>
        <td>
           <input name="range1" value="" size="10"/>
        </td>

    <td align="center" CLASS="L1">4th Cost:</td>
    <td>
        <input name="cost1" value="" size="10"/>
    </td>
   </tr>

          <tr>
    <td align="center" CLASS="L1" >5th Range:</td>
        <td>
           <input name="range1" value="" size="10"/>
        </td>

    <td align="center" CLASS="L1">5th Cost:</td>
    <td>
        <input name="cost1" value="" size="10"/>
    </td>
   </tr>

          <tr>
    <td align="center" CLASS="L1" >6th Range:</td>
        <td>
           <input name="range1" value="" size="10"/>
        </td>

    <td align="center" CLASS="L1">6th Cost:</td>
    <td>
        <input name="cost1" value="" size="10"/>
    </td>
   </tr>
   </tr>

          <tr>
    <td align="center" CLASS="L1" >Minimum Amt:</td>
        <td>
           <input name="minimumAmt" value="" size="10"/>
        </td>

    <td align="center" CLASS="L1"> @ </td>
    <td>
        <input name="minimumCost" value="" size="10"/>
    </td>
   </tr>

   <tr>
    <td align="center" CLASS="L1" >Maximum Amt:</td>
        <td>
           <input name="maximumAmt" value="" size="10"/>
        </td>

    <td align="center" CLASS="L1"> @ </td>
    <td>
        <input name="maximumCost" value="" size="10"/>
    </td>
   </tr>
   </tbody>
   <tfooter>
            <tr>
    <td align="center">&nbsp;</td>
</tr>
<tr>
    <td colspan="8" align="center">
    <input type="button" value="Cancel" onClick="javascript:window.location='SitePlanDeliveryFeeListFrame.jsp'"/>&nbsp;&nbsp;
    <input  type="button" value="Help?" onClick="javascript:window.alert('The associated cost will be applied to each successful Rx up to this Range value. \n \n ie, putting 100 in Range1 and 250 in Range2 would mean Cost1 would be applied to 1-100 and Cost2 would be applied to 101-250. \n \n Pair each pair/cost from 1 being the first set. Any Rx's that go beyond the last range setting will have a default Rx Cost of 0$');"/>&nbsp;&nbsp;
    <input type="submit" name="save" value="Create"/>
    </td>
</tr>
   </tfooter>

</table>
</body>

ayyyyy table descr

0 个答案:

没有答案