CODEWITHSUNDEEP
htmlcss
user1394925
user1394925

Reputation: 752

how to keep table 100% wide?

I have an application you can access here. When you open the application simply click on the plus button, you will see a modal window appear with a search bar.

Now Please do these 2 searches:

Search 1: AAA

Search 2:AAE

You will see that in AAE Search, the table goes to its full width which is great, but if you do AAA Search, the width of the table is a lot smaller.

I want the width of the table to stay fixed at 100% at all times (don't want it to go smaller) but I don't know how to do this.

How can the code be fixed below to meet the requirement?

Below is the php code which echos the table:

     $output = "";
$output .= "
    <table border='1' id='resultbl'>
      <tr>
      <th id='questionth'>Question</th>
      <th id='optiontypeth'>Option Type</th>
      <th id='noofanswersth'>Number of <br/> Answers</th>
      <th id='answerth'>Answer</th>
      <th id='noofrepliesth'>Number of <br/> Replies</th>
      <th id='noofmarksth'>Number of <br/> Marks</th>
      </tr>
";
        while ($questionrow = mysql_fetch_assoc($questionresult)) {
$output .= "
      <tr>
      <td id='questiontd'>{$questionrow['QuestionContent']}</td>
      <td id='optiontypetd'>{$questionrow['OptionType']}</td>
      <td id='noofanswerstd'>{$questionrow['NoofAnswers']}</td>
      <td id='answertd'>{$questionrow['Answer']}</td>
      <td id='noofrepliestd'>{$questionrow['ReplyType']}</td>
      <td id='noofmarkstd'>{$questionrow['QuestionMarks']}</td>
      </tr>";
        }
        $output .= "        </table>";

        echo $output;

Below is the full css code: Evey column heading and row is aligned center and has a min and max width and the table it self has a min and max width of 100%:

#questionth{
    min-width:35%;  
    max-width:35%;  
    text-align:center;
}

#optiontypeth{
    min-width:15%;
    max-width:15%;  
    text-align:center;
}

#noofanswersth{
    min-width:10%;
    max-width:10%;  
    text-align:center;
}

#answerth{
    min-width:20%;
    max-width:20%;  
    text-align:center;
}

#noofrepliesth{
    min-width:10%;
    max-width:10%;      
    text-align:center;
}

#noofmarksth{
    min-width:10%;
    max-width:10%;  
    text-align:center;
}

#questiontd{
    min-width:35%;
    max-width:35%;      
    text-align:center;
}

#optiontypetd{
    min-width:15%;
    max-width:15%;  
    text-align:center;
}

#noofanswerstd{
    min-width:10%;
    max-width:10%;  
    text-align:center;
}

#answertd{
    min-width:20%;
    max-width:20%;  
    text-align:center;
}

#noofrepliestd{
    min-width:10%;
    max-width:10%;      
    text-align:center;
}

#noofmarkstd{
    min-width:10%;
    max-width:10%;  
    text-align:center;
}

#resulttbl{
    min-width:100%;
    max-width:100%;
}

Upvotes: 0

Views: 122

Answers (3)

Tsukimoto Mitsumasa
Tsukimoto Mitsumasa

Reputation: 582

How about making your table width = 100% ?

Upvotes: 1

cHao
cHao

Reputation: 86585

Note, your CSS refers to #resulttbl. Your script is outputting a table with the id resultbl, so the 100% width wouldn't apply to it.

Upvotes: 4

John Conde
John Conde

Reputation: 219934

Why make it so complex? Just declare the width and leave it at that:

#resulttbl{
    width:100%;
}

If for some reason that doesn't work, try using !important. If that does work then another rule is taking a higher precedence then the current rule.

#resulttbl{
    width:100% !important;
}

update

cHao is correct. My answer is really just good advice at this point.

Upvotes: 1

Related Questions