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：爲什麼這些表不是相同的寬度？

回答

相關問題