css：为什么这些表不是相同的宽度？

我认为在所有行上使用100％会使它们具有相同的大小，但我显然是错误的。css：为什么这些表不是相同的宽度？

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

来源

2010-08-16 andandandand

第一件事第一件事：您有多个#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%; }

和HTML（上图）在Chrome 5.0.375.125在Ubuntu 10.04，我的假设似乎是有效的：该行似乎忽略width完全属性。

来源

2010-08-16 23:06:07

谢谢。为什么你的例子在最后显示？它出现在Firefox和Chrome上。我一直在试图抹去它，找不到它的来源。 – andandandand 2010-08-16 23:45:38

顺便说一句，我也在Ubuntu 10.04 testin。 – andandandand 2010-08-16 23:52:03

我没有注意到......我不知道它来自哪里，可悲的是，它似乎与你的“charset”有关，因为从ISO-8859-1到UTF-8的原因奇怪的人物消失。 = / – 2010-08-17 10:12:38

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

来源

2010-08-16 23:04:26

css：为什么这些表不是相同的宽度？

回答

相关问题