how to keep table 100% wide?


Tags: html,css

Problem :

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%;
}


Solution :

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.


    CSS Howto..

    jQuery Cycle Plugin is showing border of auto-generated links

    By CSS, how to make page height not change when an element is moved down

    How to make my phone number bold using css [closed]

    How to reduce shiny interactive rmarkdown margins?

    How to Create Responsive Web Page With Static Header?

    How to add two lines of text inside a DIV

    How to pre-load images only using CSS (no JS)?

    How do I draw a Diagonal div?

    What is default z-Index of
    element in HTML, and how to get it using JavaScript?

    How to leave out the last column when calculating the width

    How to make a CSS menu to remain visible after a child has been clicked on

    How do I make this style an external CSS/SCSS file?

    How to stop divs moving in browser when zoom in/out?

    How to get rid of space between buttons and content/paragraph? (CSS)

    how do I customize header color in jquery mobile?

    How to get global selector inside emulated view encapsulation (CSS / Angular2)

    how to give css height a percentage of a different div (above original div)

    asp .net: how to change css on span tag in c#

    How can I divide a div element's content with CSS selector?

    How to have proper spacing between items in the navbar regardless of word size?

    How to create transparent background color in html & css [duplicate]

    How can I make an element fit to fill the right part of the window?

    How can I change the colour of a line that starts with specific characters in javascript/css?

    How to change the CSS of Background Element?

    How to make header background 100% height?

    CSS - How to prevent the DIV without content from shrinking

    CSS Question: How to prevent background from being affected by padding?

    How to make Superfish menu vertical in first level but horizontal in second level?

    How to build this layout with CSS?

    How to add custom font for Avada WordPress Theme