css: why aren't these tables the same width?
I thought that using 100% on all rows would render them the same size, but I'm evidently wrong.
a)How can I fix this so all tables are the same width as the widest one?
b)How can I set a fixed width for all rows?
<!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ó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> ¿El curso respondió a sus expectativas iniciales? </td></tr>
<tr class='row2'><td> 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ón del curso </td></tr>
<tr class='row2'><td> 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>¿Qué opinión le mereció el contenido general del curso?</td></tr>
<tr class='row2'><td> 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>
Live demo posted (on OP's behalf) at: http://jsbin.com/ifida
First thing's first: You've got multiple instances of the #layouttable id. This is invalid, you can only have one instance of an id on a given page. I'd suggest converting that to a class-name instead.
Incidentally you're also not using the cascade efficiently (or, in my view, properly), given that you're repeating css declarations for different rows, you could amend that to:
tr {border: 0; text-align: center; }
tr.row1 {background-color: #ccc; }
/* etc. */
If you then define a width for the table of class layouttable all tables are the same width:
<!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ó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> ¿El curso respondió a sus expectativas iniciales? </td></tr>
<tr class='row2'><td> 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ón del curso </td></tr>
<tr class='row2'><td> 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>¿Qué opinión le mereció el contenido general del curso?</td></tr>
<tr class='row2'><td> 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>
How can I fix this so all tables are the same width as the widest one?
Define a width for the table as 100%, that way it should expand to fill the horizontal space offered by its parent element.
How can I set a fixed width for all rows?
A table-row will always be as wide as its parent table. Unless I've missed something incredibly basic from xhtml/css until now. At least I've never successfully (or deliberately) tried to assign a width for a tr because of that understanding.
Having tested the following:
table {width: 100%; }
tr {width: 10%; }
With your html (above) in Chrome 5.0.375.125 on Ubuntu 10.04, my assumption seems valid: the row seems to ignore the width attribute entirely.
Set the width to the table instead of the row.
加载中,请稍侯......
精彩评论