Html table

HTML & CSS
1

I have a small html table. code below

<html>
<body>
 <table width="100%" class="tableWidthPPA" id="table3" border="1" cellspacing="0" cellpadding="0">
      <tbody>
         <tr class="subHead">
            <td height="40" class="subIcon" colspan="5">
               <img width="25" height="25" alt="" src="/PAISV3Proj/images/ppa/Clients and Markets.png">
               <span class="subTitleHd"><strong>Clients and Markets</strong></span>
            </td>
         </tr>
         <tr>
            <td class="rowShade2">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].sectionId" type="hidden" value="2">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].subsectionId" type="hidden" value="1">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].id" type="hidden" value="57">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].attributeName" type="hidden" value="What will you achieve in your clients and markets role?">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].planOrAppraisalType" type="hidden" value="PP">
               <strong>Lorem ipsum dolor. Sit amet lectus vitae leo eu adipiscing.</strong>
               <br>*Maximum 3000 characters
            </td>
            <td colspan="4">
               <table width="100%" class="fixed" border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                     <tr>
                        <td colspan="4">
                           <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].target" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].target" style="width: 660px; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeyup="javascript:CountThisSmall('3000');checkTextAreaLength(this.id);" onkeypress="javascript:CountThisSmall('3000');checkTextAreaLength(this.id);" onchange="javascript:hasChanged()" readonly="readonly">dsadad</textarea>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
         <tr>
            <td class="rowShade2">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].sectionId" type="hidden" value="2">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].subsectionId" type="hidden" value="1">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].id" type="hidden" value="81">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].attributeName" type="hidden" value="What are the 2 key client relationships you plan to develop during the year and what actions will you implement to achieve this objective?">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].planOrAppraisalType" type="hidden" value="PP">
               <strong>Lorem ipsum dolor. Sit amet mi posuere vel velit. Elit nullam porta in porta nec. Cursus ut amet nec a lacus sollicitudin lorem condimentum.?</strong>
               <br>*Maximum 3000 characters
            </td>
            <td colspan="4">
               <table width="100%" class="fixed" border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                     <tr>
                        <td colspan="4">
                           <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].target" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].target" style="width: 660px; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeyup="javascript:CountThisSmall('3000');checkTextAreaLength(this.id);" onkeypress="javascript:CountThisSmall('3000');checkTextAreaLength(this.id);" onchange="javascript:hasChanged()" readonly="readonly">gfddgdgfd</textarea>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
         <tr>
            <td class="rowShade2">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].sectionId" type="hidden" value="2">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].subsectionId" type="hidden" value="1">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].id" type="hidden" value="58">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].attributeName" type="hidden" value="Which partners will you actively collaborate with to bring PwC services to the market and to clients? Scroll down below for an APR request.">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].planOrAppraisalType" type="hidden" value="PP">
               <strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</strong>
            </td>
            <td colspan="4">
               <table width="100%" class="fixed" border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                     <tr>
                        <td colspan="4">
                           <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].target" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].target" style="width: 660px; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeyup="javascript:CountThisSmall('1499');checkTextAreaLength(this.id);" onkeypress="javascript:CountThisSmall('1499');checkTextAreaLength(this.id);" onchange="javascript:hasChanged()" readonly="readonly"></textarea>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
         <tr>
            <td class="rowShade2">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].sectionId" type="hidden" value="2">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].subsectionId" type="hidden" value="1">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].id" type="hidden" value="59">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].attributeName" type="hidden" value="Net Revenue delivered where you are the engagement partner  (appropriate currency should be used based on your  currency of invoicing)">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].planOrAppraisalType" type="hidden" value="PT">
               <strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibu</strong>
            </td>
            <td colspan="4">
               <table width="100%" class="fixed" border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                     <tr class="rowShade2">
                        <td align="center" style="width: 81px;">&nbsp;<b>Target</b></td>
                        <td style="width: 212px;">&nbsp;
                           <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].target" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].target" style="width: 200px; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:checkTextAreaLength(this.id)" onkeyup="javascript:checkTextAreaLength(this.id)" onchange="javascript:hasChanged()" readonly="readonly">dsfdsfs</textarea>
                        </td>
                        <td align="center" style="width: 66px;">&nbsp;
                           <b>KZT</b>
                           <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributess[3].pCurrency" id="planSectionAttributess[0].planSubsection[0].subsectionPlanAttributes[3].pCurrency" type="hidden" value="21">
                        </td>
                        <td style="width: 301px;">&nbsp;
                           <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].pComments" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].pComments" style="width: 265px; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:checkTextAreaLength(this.id)" onkeyup="javascript:checkTextAreaLength(this.id)" onchange="javascript:hasChanged()" readonly="readonly">sdfsdf</textarea>
                        </td>
                     </tr>
                     <tr>
                        <td align="center" style="width: 81px;"><b>Result</b></td>
                        <td style="width: 212px;">&nbsp;
                           <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].result" class="inputStyle isNumber" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].result" style="width: 200px; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:CountThisSmall('60');checkTextAreaLength(this.id)" onkeyup="javascript:CountThisSmall('60');checkTextAreaLength(this.id);" onkeypress="javascript:CountThisSmall('60');" onfocus="javascript:storeId(this.id)" onchange="javascript:hasChanged()"></textarea>
                        </td>
                        <td align="center" style="width: 66px;">
                           &nbsp;
                           <select name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].aCurrency" class="selectBoxStyle" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].aCurrency" style="width: 55px;" width="55">
                              <option value="-1">Select</option>
                              <option value="1">USD</option>
                              <option value="2">GBP</option>
                              <option value="3">EUR</option>
                              <option value="4">CZK</option>
                              <option value="5">PLN</option>
                              <option value="6">HUF</option>
                              <option value="7">RUB</option>
                              <option value="9">CAD</option>
                              <option value="10">LVL</option>
                              <option value="11">RON</option>
                              <option value="12">SKK</option>
                              <option value="13">EEK</option>
                              <option value="14">LLK</option>
                              <option value="15">AMD</option>
                              <option value="16">AZN</option>
                              <option value="17">BAM</option>
                              <option value="18">BGN</option>
                              <option value="19">HRK</option>
                              <option value="20">GEL</option>
                              <option value="21">KZT</option>
                              <option value="22">KGS</option>
                              <option value="23">LTL</option>
                              <option value="24">MKD</option>
                              <option value="25">MDL</option>
                              <option value="26">ROL</option>
                              <option value="27">RSD</option>
                              <option value="28">SIT</option>
                              <option value="29">UAH</option>
                              <option value="30">ALL</option>
                           </select>
                        </td>
                        <td style="width: 301px;">&nbsp;
                           <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].aComments" class="inputStyle" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].aComments" style="width: 265px; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:checkTextAreaLength(this.id)" onkeyup="javascript:checkTextAreaLength(this.id)" onchange="javascript:hasChanged()"></textarea>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
         <tr>
            <td class="rowShade2">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].sectionId" type="hidden" value="2">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].subsectionId" type="hidden" value="1">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].id" type="hidden" value="82">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].attributeName" type="hidden" value="Sales Target where you are a major contributor to the sales success (in USD)">
               <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].planOrAppraisalType" type="hidden" value="PT">
               <strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligu</strong>
            </td>
            <td colspan="4">
               <table width="100%" class="fixed" border="0" cellspacing="0" cellpadding="0">
                  <tbody>
                     <tr class="rowShade2">
                        <td align="center" style="width: 25px;">&nbsp;<b>Target</b></td>
                        <td style="width: 80px;">&nbsp;
                           <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].target" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].target" style="width: 200px; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:checkTextAreaLength(this.id)" onkeyup="javascript:checkTextAreaLength(this.id)" onchange="javascript:hasChanged()" readonly="readonly">fsdfsdf</textarea>
                        </td>
                        <td align="center" style="width: 20px;">&nbsp;
                        </td>
                        <td style="width: 100px;">&nbsp;
                           <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].pComments" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].pComments" style="width: 265px; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:checkTextAreaLength(this.id)" onkeyup="javascript:checkTextAreaLength(this.id)" onchange="javascript:hasChanged()" readonly="readonly">dsfdsf</textarea>
                        </td>
                     </tr>
                     <tr>
                        <td align="center" style="width: 25px;"><b>Result</b></td>
                        <td style="width: 80px;">&nbsp;
                           <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].result" class="inputStyle" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].result" style="width: 200px; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:CountThisSmall('60');checkTextAreaLength(this.id)" onkeyup="javascript:CountThisSmall('60');checkTextAreaLength(this.id);" onkeypress="javascript:CountThisSmall('60');" onfocus="javascript:storeId(this.id)" onchange="javascript:hasChanged()"></textarea>
                        </td>
                        <td align="center" style="width: 20px;">&nbsp;
                        </td>
                        <td style="width: 100px;">&nbsp;
                           <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].aComments" class="inputStyle" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].aComments" style="width: 265px; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:checkTextAreaLength(this.id)" onkeyup="javascript:checkTextAreaLength(this.id)" onchange="javascript:hasChanged()"></textarea>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
        
         
    

   
    
   
      </tbody>

</body>
</html>

It shows like this in IE :

1361Ɨ328 28.8 KB

I require a design like this : ( edited in mspaint )

1365Ɨ241 14 KB

What minimum changes I need to do in my html code ?

8

The image shown in your post for IE is the same as I see in Firefox and Chrome. This thread has been created under a bogus claim. The previous thread should be reopened and continued. This thread should be deleted or merged with the other.

9

It was explained to you in your other thread that the right-hand column of the table has a fixed width of 660px, so the left-hand column will take up the remaining screen size - whatever that may be.

If you want the right-hand column to always be smaller than the left like this, then you would need to use a flexible measure like 40% instead of a fixed pixel size.

2 Likes
10

I am not aure where you would like to change code ā€¦ Could you please edit my small html code with that change. ā€¦ Iā€™d like to check that in IE to start with ā€¦ This would help me to understand your suggestion and adjust accordingly to move aheadā€¦Iā€™ll give my feedback after testing in IE

11

Your ā€œsmall html codeā€ is nested tables with at least 36 occurrences of inline width values specified.

Personally, I would scrap both the nested tables and the inline CSS and start anew.

But if you are firm on wanting both despite the difficulties they are and will give you and anyone else that might work with it, a place to start is to remove all width equals using pixel units,

3 Likes
12

This is a very quick and very dirty fix but I guess you wanted it to look something like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.tableWidthPPA textarea,.tableWidthPPA input{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;	
	box-sizing:border-box;
}
.tableWidthPPA td{padding:3px 5px}
</style>
</head>

<body>
<table width="100%" class="tableWidthPPA" id="table3" border="1" cellspacing="0" cellpadding="0">
  <tbody>
    <tr class="subHead">
      <td height="40" class="subIcon" colspan="5"><img width="25" height="25" alt="" src="/PAISV3Proj/images/ppa/Clients and Markets.png"> <span class="subTitleHd"><strong>Clients and Markets</strong></span></td>
    </tr>
    <tr>
      <td class="rowShade2"><input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].sectionId" type="hidden" value="2">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].subsectionId" type="hidden" value="1">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].id" type="hidden" value="57">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].attributeName" type="hidden" value="What will you achieve in your clients and markets role?">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].planOrAppraisalType" type="hidden" value="PP">
        <strong>Lorem ipsum dolor. Sit amet lectus vitae leo eu adipiscing.</strong> <br>
        *Maximum 3000 characters </td>
      <td style="width:40%;" colspan="4"><table width="100%" class="fixed" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td colspan="4"><textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].target" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[0].target" style="width: 100%; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeyup="javascript:CountThisSmall('3000');checkTextAreaLength(this.id);" onkeypress="javascript:CountThisSmall('3000');checkTextAreaLength(this.id);" onchange="javascript:hasChanged()" readonly>dsadad</textarea></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
    <tr>
      <td class="rowShade2"><input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].sectionId" type="hidden" value="2">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].subsectionId" type="hidden" value="1">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].id" type="hidden" value="81">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].attributeName" type="hidden" value="What are the 2 key client relationships you plan to develop during the year and what actions will you implement to achieve this objective?">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].planOrAppraisalType" type="hidden" value="PP">
        <strong>Lorem ipsum dolor. Sit amet mi posuere vel velit. Elit nullam porta in porta nec. Cursus ut amet nec a lacus sollicitudin lorem condimentum.?</strong> <br>
        *Maximum 3000 characters </td>
      <td style="width:40%;" colspan="4"><table width="100%" class="fixed" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td colspan="4"><textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].target" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[1].target" style="width: 100%; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeyup="javascript:CountThisSmall('3000');checkTextAreaLength(this.id);" onkeypress="javascript:CountThisSmall('3000');checkTextAreaLength(this.id);" onchange="javascript:hasChanged()" readonly>gfddgdgfd</textarea></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
    <tr>
      <td class="rowShade2"><input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].sectionId" type="hidden" value="2">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].subsectionId" type="hidden" value="1">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].id" type="hidden" value="58">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].attributeName" type="hidden" value="Which partners will you actively collaborate with to bring PwC services to the market and to clients? Scroll down below for an APR request.">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].planOrAppraisalType" type="hidden" value="PP">
        <strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</strong></td>
      <td colspan="4"><table width="100%" class="fixed" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td colspan="4"><textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].target" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[2].target" style="width: 100%; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeyup="javascript:CountThisSmall('1499');checkTextAreaLength(this.id);" onkeypress="javascript:CountThisSmall('1499');checkTextAreaLength(this.id);" onchange="javascript:hasChanged()" readonly></textarea></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
    <tr>
      <td class="rowShade2"><input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].sectionId" type="hidden" value="2">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].subsectionId" type="hidden" value="1">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].id" type="hidden" value="59">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].attributeName" type="hidden" value="Net Revenue delivered where you are the engagement partner  (appropriate currency should be used based on your  currency of invoicing)">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].planOrAppraisalType" type="hidden" value="PT">
        <strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibu</strong></td>
      <td style="width:40%;" colspan="4"><table width="100%" class="fixed" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr class="rowShade2">
              <td align="center" style="width: 16%;"><b>Target</b></td>
              <td style="width: 30%;">
                <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].target" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].target" style="width: 100%; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:checkTextAreaLength(this.id)" onkeyup="javascript:checkTextAreaLength(this.id)" onchange="javascript:hasChanged()" readonly>dsfdsfs</textarea></td>
              <td align="center" style="width: 16%;"><b>KZT</b>
                <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributess[3].pCurrency" id="planSectionAttributess[0].planSubsection[0].subsectionPlanAttributes[3].pCurrency" type="hidden" value="21"></td>
              <td style="width: 35%;">
                <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].pComments" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].pComments" style="width: 100%; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:checkTextAreaLength(this.id)" onkeyup="javascript:checkTextAreaLength(this.id)" onchange="javascript:hasChanged()" readonly>sdfsdf</textarea></td>
            </tr>
            <tr>
              <td align="center" style="width: 16%;"><b>Result</b></td>
              <td style="width: 30%;">
                <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].result" class="inputStyle isNumber" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].result" style="width: 100%; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:CountThisSmall('60');checkTextAreaLength(this.id)" onkeyup="javascript:CountThisSmall('60');checkTextAreaLength(this.id);" onkeypress="javascript:CountThisSmall('60');" onfocus="javascript:storeId(this.id)" onchange="javascript:hasChanged()"></textarea></td>
              <td align="center" style="width: 16%;">
                <select name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].aCurrency" class="selectBoxStyle" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].aCurrency" style="width: 100%;" width="55">
                  <option value="-1">Select</option>
                  <option value="1">USD</option>
                  <option value="2">GBP</option>
                  <option value="3">EUR</option>
                  <option value="4">CZK</option>
                  <option value="5">PLN</option>
                  <option value="6">HUF</option>
                  <option value="7">RUB</option>
                  <option value="9">CAD</option>
                  <option value="10">LVL</option>
                  <option value="11">RON</option>
                  <option value="12">SKK</option>
                  <option value="13">EEK</option>
                  <option value="14">LLK</option>
                  <option value="15">AMD</option>
                  <option value="16">AZN</option>
                  <option value="17">BAM</option>
                  <option value="18">BGN</option>
                  <option value="19">HRK</option>
                  <option value="20">GEL</option>
                  <option value="21">KZT</option>
                  <option value="22">KGS</option>
                  <option value="23">LTL</option>
                  <option value="24">MKD</option>
                  <option value="25">MDL</option>
                  <option value="26">ROL</option>
                  <option value="27">RSD</option>
                  <option value="28">SIT</option>
                  <option value="29">UAH</option>
                  <option value="30">ALL</option>
                </select></td>
              <td style="width: 35%">
                <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].aComments" class="inputStyle" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[3].aComments" style="width: 100%; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:checkTextAreaLength(this.id)" onkeyup="javascript:checkTextAreaLength(this.id)" onchange="javascript:hasChanged()"></textarea></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
    <tr>
      <td class="rowShade2"><input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].sectionId" type="hidden" value="2">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].subsectionId" type="hidden" value="1">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].id" type="hidden" value="82">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].attributeName" type="hidden" value="Sales Target where you are a major contributor to the sales success (in USD)">
        <input name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].planOrAppraisalType" type="hidden" value="PT">
        <strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligu</strong></td>
      <td style="width:40%;" colspan="4"><table width="100%" class="fixed" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr class="rowShade2">
              <td align="center" style="width: 16%;"><b>Target</b></td>
              <td style="width: 30%;">
                <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].target" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].target" style="width: 100%; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:checkTextAreaLength(this.id)" onkeyup="javascript:checkTextAreaLength(this.id)" onchange="javascript:hasChanged()" readonly>fsdfsdf</textarea></td>
              <td align="center" style="width: 16%;">&nbsp;</td>
              <td style="width: 35%;">
                <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].pComments" class="inputDisabled" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].pComments" style="width: 100%; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:checkTextAreaLength(this.id)" onkeyup="javascript:checkTextAreaLength(this.id)" onchange="javascript:hasChanged()" readonly>dsfdsf</textarea></td>
            </tr>
            <tr>
              <td align="center" style="width: 16%;"><b>Result</b></td>
              <td style="width: 30%;">
                <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].result" class="inputStyle" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].result" style="width: 100%; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:CountThisSmall('60');checkTextAreaLength(this.id)" onkeyup="javascript:CountThisSmall('60');checkTextAreaLength(this.id);" onkeypress="javascript:CountThisSmall('60');" onfocus="javascript:storeId(this.id)" onchange="javascript:hasChanged()"></textarea></td>
              <td align="center" style="width: 16%;">&nbsp;</td>
              <td style="width: 35%;">
                <textarea name="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].aComments" class="inputStyle" id="planSectionAttributes[0].planSubsection[0].subsectionPlanAttributes[4].aComments" style="width: 100%; height: 30px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" onkeydown="javascript:checkTextAreaLength(this.id)" onkeyup="javascript:checkTextAreaLength(this.id)" onchange="javascript:hasChanged()"></textarea></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
  </tbody>
</table>
</body>
</html>

The above looks like this in IE:

1798Ɨ398 74.1 KB

Realistically though the whole thing should be coded from anew and remove all the inline styling, deprecated attributes and bad practices. It would then become much simpler and easier to manage.:slight_smile:

7 Likes
13

<off topic>
I received a warning message that I had entered too many characters into the body of the post. I donā€™t see that anything was truncated, but I will attach the file to this post ā€œjust in caseā€.
</off topic>

test-table1.html (44.9 KB)

Well, bummer. My post was indeed not accepted.
The intro went something like thisā€¦

This is my contribution to the causeā€¦

I made zero attempt to keep the deprecated attributes, nested tables and inline styles. Expect CSS at the top of the page.

I chose to use ems instead of percents because if a textarea element is assigned {width:100%} so it will fill the width of a containing element, such as a table-cell, the textarea element can still be resized and can render the obliging table layout asunder.

I found that ems plus a bunch of media queries gives a satisfactory result in most casesā€¦ this one included. The layout is not quite perfect cross-browser and it works best within a ā€œreasonableā€ range of font sizes. Considering the challenge of the layout, I think itā€™s acceptable. I coded it using Firefox, font-size 16, font-family Verdana. It worked OK in Chrome with its smaller default font.

Perhaps @PaulOB knows of a better way to prevent the textarea resize problem! :slight_smile:

1 Like
15

Hi Ron,

If you mean the horizontal resize problem then you can just use the resize property to limit the resize to vertical (my usual default).

e.g.

textarea { resize:vertical; }

Iā€™m sure you knew that anyway so I may have misunderstood:)

Your demo looks good to me although I may have allowed a little more room for the select so that it doesnā€™t get cut off.:wink:

I would have set width to 100% for the inputs and textareas and then just sized the cells instead and that just leaves one thing to worry about. Of course min-widths would be useful on the inputs/textareas just in case but media queries should catch those anyway. As for max-widths I wouldnā€™t have bothered as the table will ultimately control that but I suppose will be useful just in case.

I couldnā€™t work out if the text on the left was supposed to be the label for the input and if so then it should be marked up with label tags (with ā€˜forā€™ attribute) as screen readers wonā€™t know what the inputs are for especially without scope attributes in the table.

At smaller screen widths I would have set the cells to block so that they align vertically for mobile and assuming the labels sit above.

You put a lot of work into that demo Ron so I hope the OP will consider the work you have done:)

5 Likes
16

Thank you very much for the feedback, @PaulOB!

My goals in the first layout were three-foldā€¦ (1) to eliminate the textarea horizontal resize problem, (2) to eliminate nested tables, (3) to eliminate deprecated HTML attributes and replace them with CSS. Due to the almost total absence of useable layout information from the OP, many decisions were and still are speculative at best or skipped entirely.

I discovered the textarea resize problem a couple of years ago on a fixed layout page and worked around it with min-widths and max-widths on the textareas using pixels. It worked well. I did not remember the resize property this time around but would still be skeptical of it because ā€œcaniuseā€ seems to say that it is not well implemented cross-browser and Iā€™m generally a slow adopter who would rather wait than try to memorize a slew of ā€œworkaroundsā€ for non-compliant browsers. (I got bit recently using the calc function because I love it and temporarily forgot that it was not fully adopted - :shrug: )

929Ɨ838 41.7 KB

To demonstrate the textarea ā€œproblemā€, just grab the resize corner on any of the textarea fields in the OPā€™s posted code or Paulā€™s quick and dirty fixup for the OPā€™s layout and drag that handle off the screen to the right or almost anywhere else. The layout gets a bit wonky. Thatā€™s what I was trying to solve using max-width and min-width on the textareas. Ems werenā€™t a great choice; px would have probably worked better; but I wasnā€™t thinking px. At this point, Iā€™m now enamored with {resize:vertical}. It works a treat! Thank you again!!!

I couldnā€™t either, so I left it unfinished.

The OP had said that his layout was to be used in-house and did not need to support mobile devices but he would never say what minimum width he needed to serve. Instead, he abandoned his first thread and started this new thread. Go figure. Anyway, I stopped short of changing cells to blocks.

Thatā€™s a funny mistake on my part. I copied the OPs code and matched his fixed with using ems. Guess I was thinking that he was trying to minimize space being used outside of the textarea fields. Ok, truth be told, guess I wasnā€™t thinking/observingā€¦ because it didnā€™t even register with me that the word ā€œSelectā€ was chopped. Blinders. :slight_smile: Applying no width at all (the default width) would have been appropriate at that stage then changing it later as needed.

It seemed to me that the OP was trying to preserve as much width on the right side of the page as possible up to about 600px so in this revision I kept that width wide until the last minute (only one media query :slight_smile: ). I could easily have misinterpreted his intent, though, since I am ā€œESP challengedā€.

Something new in this revision.

I added a row of empty cells at the top of the table as a reference for the colspans that follow in subsequent rows. Without that reference row, the colspans would not know their widths in a {table-layout:fixed} layout. To test for yourself, just delete that top row and reload the page.

I tackled the OPā€™s issue as an interesting challenge. At this point, since I have little idea where the OPs head is, this work is primarily for my benefit and for sharing. Comments from anyone are welcomeā€¦ with the hope that the OP can get something out of all of this conversation.

winzips-table-rev2.html (44.8 KB)

1 Like
17

Hi Ron,

The caniuse table is a bit confusing because it gives IE no support for resize but doesnā€™t mention that IE does not allow the textarea to be resized anyway and thus is irrelevant for your purpose. That means support is more or less 100% on desktop.

In my examples you could have also solved the problem by adding a max-width of 100% to the textarea as this will restrict them to their containers limits. It seems the browser adjusts the width using inline styles when you resize so your original widths get over-ridden but max-width will still take effect. !important on the original width would also have worked.

However resize:vertical is the best option:)

1 Like
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.