troubleshooting Question

HTML Cell Alignment with nested Table

Avatar of Eduardo Aviles
Eduardo Aviles asked on
CSSHTML
4 Comments1 Solution120 ViewsLast Modified:
Hello Experts, I am hoping you can help with my dilemma. I have an HTML page that has two tables one table nested to the other. What I need to do is align the cell width of the second table to match with the first one. I have tried everything to get it to work with no success. Any help would be most appreciated.

Code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=10">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>
      /* Create two equal columns that floats next to each other */
      .middle {
            
            width: 900px;
            padding: 10px;
            border: solid;
            margin-left: auto;
            margin-right: auto;

      }
</style>
</head>
<body  bgcolor = "#86888c" text="Black">
 <div class="middle" style="background-color:#3399ff;" >
    <p>
      
            <b><center><font size="3">
            Testing <br>
            Request<br>
            <font size="2" color = "Red">Version 5.0 - Development</font>
            </center></b></font>

      </p>
      <table  border="1"  id="content"  style="width:100%" >
      
            <tr>
                  <td style="padding-left: 10px" style="font-size: 12pt">Number:</td>
                  
                  <td style="padding-left: 10px" style="font-size: 12pt">
                  
                  <input type="text" style="width:150px;" name = "RequestNum" size="20" title="" id="RequestNum" disabled/><i><font size="2">
                  </td>
                  
                  <td style="padding-left: 10px" style="font-size: 12pt">Title:</td>
                  
                  <td><input type="text" style="width:200px;"  id="DocTitle" name = "DocTitle" title="" color="black" rows="2" cols="50" maxlength="30" style="width:150px;">
                  </td>
            </tr>

            
            <tr>
                  <td style="padding-left: 10px" style="font-size: 12pt">Doc Number:</td>
                  <td style="padding-left: 10px" style="font-size: 12pt"><input type="text" class="doc" style="width:150px;" id="docNum0"/></td>
      
                  <td style="padding-left: 10px" style="font-size: 12pt" >Doc Rev: </td>
                  <td><input type="text" class="rev" style="width:40px;" id="rev0"> <input type="button" id="more_fields" onclick="add_fields();" value="+" /></td>
            </tr>
                  

      </table>
      <table border="1" style="width:100%">
      
            <tr>
                  <td style="padding-left: 10px">Program:</td>
                  <td style="padding-left: 10px">
                        <Select name="Program" title="" style="width:150px;" id="Program">
                        <option value="" selected>- Select -</option>
                        <option value="Test1">Stress</option>
                        <option value="Test2">Test</option>
                        </Select>
                  </td>
                  
                  <td style="padding-left: 10px">Creation Date:</td>
                  <td>
                        <input type ="CrDateCalc" name= "CrDateCalc" id="CrDateCalc" size="20" style="width:150px;" title="" readonly/>
                  </td>
            </tr>
            <tr>
                  <td colspan="100%">
                        <hr></hr>
                  </td>
            </tr>
      
            <tr>            
                  <td colspan="2" style="font-size: 12pt"/>Testing Together:
                  
                        <Select id="" name="" title="">
                              <option value="No">No</option>
                              <option value="Yes">Yes</option>
                        </Select>
                  </td>
            </tr>
            <tr>
            </tr>
</body>
</div>
</html>
ASKER CERTIFIED SOLUTION
Brandon LyonFrontend Engineer and UX

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros