如何保持100%宽的表?

时间:2012-05-26 00:30:44

标签: html css

我有一个您可以访问here的应用程序。当您打开应用程序时,只需单击加号按钮,您将看到一个带有搜索栏的模态窗口。

现在请执行以下2次搜索:

搜索1:AAA

搜索2:AAE

你会看到在AAE搜索中,表格达到了它的全宽,这很棒,但是如果你进行AAA搜索,表格的宽度要小得多。

我希望桌子的宽度始终保持固定在100%(不要让它变小)但是我不知道怎么做。

如何在下面修复代码以满足要求?

下面是表格中的php代码:

     $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;

下面是完整的css代码:Evey列标题和行对齐中心,并且具有最小和最大宽度,并且表格自身的最小和最大宽度为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%;
}

3 个答案:

答案 0 :(得分:4)

注意,您的CSS引用#resulttbl。您的脚本正在输出标识为resultbl的表格,因此100%宽度不适用于此。

答案 1 :(得分:1)

为什么要这么复杂?只需声明宽度并将其保留在:

#resulttbl{
    width:100%;
}

如果由于某种原因无效,请尝试使用!important。如果确实有效,则另一条规则优先于当前规则。

#resulttbl{
    width:100% !important;
}

<强>更新

cHao是正确的。我的答案在这一点上真的只是一个很好的建议。

答案 2 :(得分:1)

如何让你的桌子宽度= 100%?