Question

我认为在所有行上使用100％会使它们的大小相同，但我显然是错的。

a）如何解决这个问题，以便所有表格的宽度与最宽的表格相同？

b）如何为所有行设置固定宽度？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

 <head>

   <meta http-equiv="Content-Type"
         content="text/html; charset=ISO-8859-1" />

    <title>Evaluaci&oacute;n de Curso</title>


    <style type="text/css">

        #layouttable tr.row1{ border:0px; width:100%; background-color:#CCCCCC; text-align:center;}
        #layouttable tr.row2{ border:0px; width:100%; background-color:#E8E8E8; text-align:center;} 
        #layouttable tr.row3{ border:0px; width:100%; background-color:#CCCCCC; text-align:center;}  




        body {
        background-color: #CC7722;
        margin-left:20%;
        margin-right:20%;

        padding: 10px 10px 10px 10px;
         font-family:sans-serif;

    }
     </style>

 </head>

<body>

<table id="layouttable">

        <tr class='row1'><td> &#191;El curso respondi&oacute; a sus expectativas iniciales? </td></tr>
        <tr class='row2'><td>&nbsp; &nbsp; Nada(1) / Totalmente(10)</td></tr>         
        <tr class='row3'><td>
         1 <input type="radio" name="respondioExpectativasIniciales" value="1" /> 
         2 <input type="radio" name="respondioExpectativasIniciales" value="2" />
         3 <input type="radio" name="respondioExpectativasIniciales" value="3" /> 
         4 <input type="radio" name="respondioExpectativasIniciales" value="4" />
         5 <input type="radio" name="respondioExpectativasIniciales" value="5" />
         6 <input type="radio" name="respondioExpectativasIniciales" value="6" />
         7 <input type="radio" name="respondioExpectativasIniciales" value="7" />
         8 <input type="radio" name="respondioExpectativasIniciales" value="8" />
         9 <input type="radio" name="respondioExpectativasIniciales" value="9" />
         10 <input type="radio" name="respondioExpectativasIniciales" value="10" />
        </td></tr>
        </table>


        <p></p>


        <table id="layouttable">

        <tr class='row1'><td>Duraci&oacute;n del curso </td></tr>

         <tr class='row2'><td>&nbsp; &nbsp; Muy Corta(1) / Excesiva(10) / Ideal (5)</td></tr>

         <tr class='row3'><td>
         1 <input type="radio" name="duracionDelCurso" value="1" /> 
         2 <input type="radio" name="duracionDelCurso" value="2" />
         3 <input type="radio" name="duracionDelCurso" value="3" /> 
         4 <input type="radio" name="duracionDelCurso" value="4" />
         5 <input type="radio" name="duracionDelCurso" value="5" />
         6 <input type="radio" name="duracionDelCurso" value="6" />
         7 <input type="radio" name="duracionDelCurso" value="7" />
         8 <input type="radio" name="duracionDelCurso" value="8" />
         9 <input type="radio" name="duracionDelCurso" value="9" />
         10 <input type="radio" name="duracionDelCurso" value="10" />
        </td></tr>        

        </table>

    <p></p>

    <table id="layouttable">
    <tr class='row1'><td><b>&#191;Qu&eacute; opini&oacute;n le mereci&oacute; el contenido general del curso?</td></tr>

        <tr class='row2'><td> &nbsp; &nbsp;Deficiente(1) / Excelente(10)</td></tr>


         <tr class='row3'><td>
         1 <input type="radio" name="opinionContenido" value="1" /> 
         2 <input type="radio" name="opinionContenido" value="2" />
         3 <input type="radio" name="opinionContenido" value="3" /> 
         4 <input type="radio" name="opinionContenido" value="4" />
         5 <input type="radio" name="opinionContenido" value="5" />
         6 <input type="radio" name="opinionContenido" value="6" />
         7 <input type="radio" name="opinionContenido" value="7" />
         8 <input type="radio" name="opinionContenido" value="8" />
         9 <input type="radio" name="opinionContenido" value="9" />
         10 <input type="radio" name="opinionContenido" value="10" />

         </td></tr>

          </table>


</body>
</html>

现场演示（代表OP）：http://jsbin.com/ifida

Answer 1

首先是第一件事：你有#layouttable个id的多个实例。这是无效的，您在给定页面上只能有id的一个实例。我建议将其转换为类名。

顺便提一下，你也没有有效地使用级联（或者，在我看来，正确），假设你正在为不同的行重复css声明，你可以修改为：

tr {border: 0; text-align: center; }

tr.row1 {background-color: #ccc; }
/* etc. */

如果然后为类layouttable的表定义宽度，则所有表的宽度都相同：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

 <head>

   <meta http-equiv="Content-Type"
         content="text/html; charset=ISO-8859-1" />

    <title>Evaluaci&oacute;n de Curso</title>


    <style type="text/css">

      .layouttable {width: 100%; }
      tr {border: 0; text-align: center; }

      .layouttable tr.row1 {background-color:#CCCCCC; }
      .layouttable tr.row2 {background-color:#E8E8E8; } 
      .layouttable tr.row3 {background-color:#CCCCCC; }  




        body {
        background-color: #CC7722;
        margin-left:20%;
        margin-right:20%;

        padding: 10px 10px 10px 10px;
         font-family:sans-serif;

    }
     </style>

 </head>

<body>

<table class="layouttable">

        <tr class='row1'><td> &#191;El curso respondi&oacute; a sus expectativas iniciales? </td></tr>
        <tr class='row2'><td>&nbsp; &nbsp; Nada(1) / Totalmente(10)</td></tr>         
        <tr class='row3'><td>
         1 <input type="radio" name="respondioExpectativasIniciales" value="1" /> 
         2 <input type="radio" name="respondioExpectativasIniciales" value="2" />
         3 <input type="radio" name="respondioExpectativasIniciales" value="3" /> 
         4 <input type="radio" name="respondioExpectativasIniciales" value="4" />
         5 <input type="radio" name="respondioExpectativasIniciales" value="5" />
         6 <input type="radio" name="respondioExpectativasIniciales" value="6" />
         7 <input type="radio" name="respondioExpectativasIniciales" value="7" />
         8 <input type="radio" name="respondioExpectativasIniciales" value="8" />
         9 <input type="radio" name="respondioExpectativasIniciales" value="9" />
         10 <input type="radio" name="respondioExpectativasIniciales" value="10" />
        </td></tr>
        </table>


        <p></p>


        <table class="layouttable">

        <tr class='row1'><td>Duraci&oacute;n del curso </td></tr>

         <tr class='row2'><td>&nbsp; &nbsp; Muy Corta(1) / Excesiva(10) / Ideal (5)</td></tr>

         <tr class='row3'><td>
         1 <input type="radio" name="duracionDelCurso" value="1" /> 
         2 <input type="radio" name="duracionDelCurso" value="2" />
         3 <input type="radio" name="duracionDelCurso" value="3" /> 
         4 <input type="radio" name="duracionDelCurso" value="4" />
         5 <input type="radio" name="duracionDelCurso" value="5" />
         6 <input type="radio" name="duracionDelCurso" value="6" />
         7 <input type="radio" name="duracionDelCurso" value="7" />
         8 <input type="radio" name="duracionDelCurso" value="8" />
         9 <input type="radio" name="duracionDelCurso" value="9" />
         10 <input type="radio" name="duracionDelCurso" value="10" />
        </td></tr>        

        </table>

    <p></p>

    <table class="layouttable">
    <tr class='row1'><td><b>&#191;Qu&eacute; opini&oacute;n le mereci&oacute; el contenido general del curso?</td></tr>

        <tr class='row2'><td> &nbsp; &nbsp;Deficiente(1) / Excelente(10)</td></tr>


         <tr class='row3'><td>
         1 <input type="radio" name="opinionContenido" value="1" /> 
         2 <input type="radio" name="opinionContenido" value="2" />
         3 <input type="radio" name="opinionContenido" value="3" /> 
         4 <input type="radio" name="opinionContenido" value="4" />
         5 <input type="radio" name="opinionContenido" value="5" />
         6 <input type="radio" name="opinionContenido" value="6" />
         7 <input type="radio" name="opinionContenido" value="7" />
         8 <input type="radio" name="opinionContenido" value="8" />
         9 <input type="radio" name="opinionContenido" value="9" />
         10 <input type="radio" name="opinionContenido" value="10" />

         </td></tr>

          </table>


</body>
</html>

如何解决此问题，以便所有表格的宽度与最宽的表格相同？

将表格的宽度定义为100%，这样就可以展开以填充其父元素提供的水平空间。

如何为所有行设置固定宽度？

表行始终与其父表一样宽。除非我从xhtml / css到现在都错过了一些非常基本的东西。至少我从未成功（或故意）尝试为tr分配宽度，因为这种理解。

测试了以下内容：

table  {width: 100%; }
tr {width: 10%; }

使用Ubuntu 10.04上的Chrome 5.0.375.125中的html（上图），我的假设似乎有效：该行似乎完全忽略了width属性。

Answer 2

将宽度设置为表而不是行。

css：为什么这些表的宽度不一样？

2 个答案: