ansaurus

Question

css: why aren't these tables the same width?

Answer 1

A:

Set the width to the table instead of the row.

Jeff Fohl 2010-08-16 23:04:26

Answer 2

+2 A:

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"&gt;

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

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.

David Thomas 2010-08-16 23:06:07

Thanks. Why is your example showing â€‹ at its end? It appears on both firefox and chrome. I've been trying to erase it and can't find its source.

omgzor 2010-08-16 23:45:38

btw, I'm testin in ubuntu 10.04 too.

omgzor 2010-08-16 23:52:03

I hadn't noticed that...I don't know where it's coming from, sadly, but it seems related to your `charset`, since changing it from `ISO-8859-1` to `UTF-8` causes the strange characters to disappear. =/

David Thomas 2010-08-17 10:12:38

ansaurus

tags:

views:

answers:

css: why aren't these tables the same width?

related questions