CSS: почему эти таблицы не одинаковой ширины? - PullRequest
Новая
       2

CSS: почему эти таблицы не одинаковой ширины?

0 голосов
/ 17 августа 2010

Я думал, что использование 100% для всех строк приведет к их одинаковому размеру, но я, очевидно, ошибаюсь.

a) Как я могу это исправить, чтобы все таблицы имели одинаковую ширину с самой широкой?

б) Как установить фиксированную ширину для всех строк? 

<!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>
<ч />

Демонстрация в режиме реального времени (от имени ОП) по адресу: http://jsbin.com/ifida

Ответы [ 2 ]

2 голосов
/ 17 августа 2010

Перво-наперво: у вас есть несколько экземпляров идентификатора #layouttable.Это неверно, вы можете иметь только один экземпляр 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%, чтобы она расширялась, чтобы заполнить горизонтальное пространство, предлагаемое его родителем.element.

Как установить фиксированную ширину для всех строк?

Строка таблицы всегда будет такой же ширины, как ее родительская таблица.Если только я не пропустил что-то невероятно простое из xhtml / css до сих пор.По крайней мере, я никогда успешно (или сознательно) не пытался назначить ширину для tr из-за этого понимания.

Протестировав следующее: 

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

С вашим html (выше) в Chrome 5.0.375.125 на Ubuntu 10.04 моё предположение кажется верным: строка, похоже, полностью игнорирует атрибут width.

0 голосов
/ 17 августа 2010

Установите ширину таблицы вместо строки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...