1. дома
  2. Вопрос и ответ
  3. таблица не собирается 100% высота

таблица не собирается 100% высота

2015-04-21 2 views
2

Я создаю страницу с двумя таблицами внутри таблицы, проблема в том, что моя одна таблица не идет на 100%, я создал для вас jsfiddle чтобы видеть, и тот, который является проблемой, - тот, у которого есть розовый фон. Эта проблема возникает только в Chrome, Safari и IE, но она отлично работает в Firefox.таблица не собирается 100% высота

мой HTML

<table class="table company_table_wrapper"> 
    <tbody> 
     <tr> 
      <td class="company_table" height="100%"> 
       <table class="table table_unit" style="height:100%"> 
        <tbody> 
         <tr> 
          <td colspan="3"> 
           <div class="company_title"> 
            <h2>This is the head of units</h2> 
           </div> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <div class="unit_heads"> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing</span> 
            </p> 
            <p> 
             <span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 1</span> 
            </p> 
            <p> 
             <span style="font-size: 13px; font-weight: 300;">Tel number</span> 
            </p> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: 300;"> 
              <a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a> 
             </span> 
            </p> 
           </div> 
          </td> 
          <td> 
           <div class="unit_heads"> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 2</span> 
            </p> 
            <p> 
             <span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 2</span> 
            </p> 
            <p> 
             <span style="font-size: 13px; font-weight: 300;">Tel number</span> 
            </p> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: 300;"> 
              <a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a> 
             </span> 
            </p> 
           </div> 
          </td> 
          <td> 
           <div class="unit_heads"> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 3</span> 
            </p> 
            <p> 
             <span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 3</span> 
            </p> 
            <p> 
             <span style="font-size: 13px; font-weight: 300;">Tel number</span> 
            </p> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: 300;"> 
              <a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a> 
             </span> 
            </p> 
           </div> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <div class="unit_heads"> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 4</span> 
            </p> 
            <p> 
             <span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 4</span> 
            </p> 
            <p> 
             <span style="font-size: 13px; font-weight: 300;">Tel no</span> 
            </p> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: 300;"> 
              <a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a> 
             </span> 
            </p> 
           </div> 
          </td> 
          <td> 
           <div class="unit_heads"> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 5</span> 
            </p> 
            <p> 
             <span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 5</span> 
            </p> 
            <p> 
             <span style="font-size: 13px; font-weight: 300;">Tel no</span> 
            </p> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: 300;"> 
              <a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a> 
             </span> 
            </p> 
           </div> 
          </td> 
          <td> 
           <div class="unit_heads"> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 6</span> 
            </p> 
            <p> 
             <span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 6</span> 
            </p> 
            <p> 
             <span style="font-size: 13px; font-weight: 300;">Tel no</span> 
            </p> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: 300;"> 
              <a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a> 
             </span> 
            </p> 
           </div> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
      <td class="join_table_wrapper" height="100%"> 
       <table class="table table_join_us" style="height:100%"> 
        <tbody> 
         <tr> 
          <td> 
           <div class="join_us"> 
            <div class="join_us_title"> 
             <h2>Join Us!</h2> 
             <img src="images/magnify_glass.png"> 
             <div class="clearboth"></div> 
            </div> 
            <div class="join_us_content"> 
             <p>Some content goes here</p> 
             <p> 
              More content goes here 
              <a href="[email protected]">[email protected]</a> 
             </p> 
            </div> 
           </div> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table>

Вот jsfiddle: JSFIDDLE

источник

2015-04-21 Niks

+0

Два бок о бок дивы будет лучше, чем с помощью таблицы, например, [Два divs бок о бок - дисплей жидкостей] (http://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display) –

ответ

0

Используйте display:inline-block на второй стол.

Также розовый фон приходит из вашего CSS

.company_table_wrapper .table_join_us { 
    background: none repeat scroll 0 0 pink; 
}

изменить его в соответствии с вашими потребностями.

Вот МОДИФИЦИРОВАННОЙ скрипка http://jsfiddle.net/4r767zm1/3/

источник

2015-04-21 11:26:07 JuniorDev

0

я понял, что я сделал неправильно в моем <td class="join_table_wrapper" height="100%"> я был на 100%. Мне просто нужно было изменить его на 100, без%.

источник

2015-04-21 11:26:28 Niks

+0

На самом деле любое ненулевое значение дало бы вам такой же результат. –

+0

Хорошо. Ну, я просто понял, что в IE у меня все еще есть одна и та же проблема. – Niks

-1

если и изменится на 100% с 100 становится «100px» так что у не нужно давать высоту высоту стола возьмите автоматически .. если и хотят места на нижней часть страницы и может дать

источник

2015-04-21 11:30:24

0

Добавить CSS:

.join_table_wrapper { 
    display:inline-block; 
}

обновленный скрипку http://jsfiddle.net/4r767zm1/6/

источник

2015-04-21 11:31:23

+0

Он отлично работает в хромированном и сафари, но в IE ничего не изменилось – Niks

0

Это работает для меня.

<table class="table company_table_wrapper"> 
    <tbody> 
     <tr> 
      <td class="company_table" height="100%"> 
       <table class="table table_unit" style="height:100%"> 
        <tbody> 
         <tr> 
          <td colspan="3"> 
           <div class="company_title"> 
            <h2>This is the head of units</h2> 
           </div> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <div class="unit_heads"> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing</span> 
            </p> 
            <p> 
             <span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 1</span> 
            </p> 
            <p> 
             <span style="font-size: 13px; font-weight: 300;">Tel number</span> 
            </p> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: 300;"> 
              <a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a> 
             </span> 
            </p> 
           </div> 
          </td> 
          <td> 
           <div class="unit_heads"> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 2</span> 
            </p> 
            <p> 
             <span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 2</span> 
            </p> 
            <p> 
             <span style="font-size: 13px; font-weight: 300;">Tel number</span> 
            </p> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: 300;"> 
              <a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a> 
             </span> 
            </p> 
           </div> 
          </td> 
          <td> 
           <div class="unit_heads"> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 3</span> 
            </p> 
            <p> 
             <span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 3</span> 
            </p> 
            <p> 
             <span style="font-size: 13px; font-weight: 300;">Tel number</span> 
            </p> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: 300;"> 
              <a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a> 
             </span> 
            </p> 
           </div> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <div class="unit_heads"> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 4</span> 
            </p> 
            <p> 
             <span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 4</span> 
            </p> 
            <p> 
             <span style="font-size: 13px; font-weight: 300;">Tel no</span> 
            </p> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: 300;"> 
              <a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a> 
             </span> 
            </p> 
           </div> 
          </td> 
          <td> 
           <div class="unit_heads"> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 5</span> 
            </p> 
            <p> 
             <span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 5</span> 
            </p> 
            <p> 
             <span style="font-size: 13px; font-weight: 300;">Tel no</span> 
            </p> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: 300;"> 
              <a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a> 
             </span> 
            </p> 
           </div> 
          </td> 
          <td> 
           <div class="unit_heads"> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: bold;">Testing 6</span> 
            </p> 
            <p> 
             <span style="color: #00316f; font-size: 13px; font-weight: 600;">Person 6</span> 
            </p> 
            <p> 
             <span style="font-size: 13px; font-weight: 300;">Tel no</span> 
            </p> 
            <p> 
             <span style="color: #6197dc; font-size: 13px; font-weight: 300;"> 
              <a href="mailto:[email protected]" style="color: #6197dc;">[email protected]</a> 
             </span> 
            </p> 
           </div> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
      <td class="join_table_wrapper" style="height:1px"> 

       <table class="table table_join_us" style="height:100%"> 
        <tbody> 
         <tr style="height:1px"> 
          <td> 
           <div class="join_us" style="height:100%"> 
            <div class="join_us_title"> 
             <h2>Join Us!</h2> 
             <img src="images/magnify_glass.png"> 
             <div class="clearboth"></div> 
            </div> 
            <div class="join_us_content"> 
             <p>Some content goes here</p> 
             <p> 
              More content goes here 
              <a href="[email protected]">[email protected]</a> 
             </p> 
            </div> 
           </div> 
          </td> 
         </tr> 
        </tbody> 
       </table> 

      </td> 
     </tr> 
    </tbody> 
</table>

Fiddle

источник

2015-04-21 11:48:13 cubanGuy

0

Существует проблема кросс-браузер с таблицами в Chrome (и, вероятно, подобных WebKit браузерах) и в IE. (Это частично объясняется спецификацией CSS, оставляя некоторые сведения о высоте таблиц таблицы на усмотрение браузера.)

Вам нужно установить значение высоты в таблицу верхнего уровня, чтобы процентные значения высоты были равны правильно вычислить на вложенных дочерних таблицах и ячейках таблицы.

В Chrome браузеры, добавьте следующее:

<table class="table company_table_wrapper" height="100%">

или

<table class="table company_table_wrapper" style="height: 100%";>

и это устраняет проблему.

См скрипку: http://jsfiddle.net/3hjznx0d/

Однако, это не работает в IE.

Обходной для IE (и это работает одинаково хорошо для Chrome и Firefox) это установить:

<table class="table company_table_wrapper" height="1">

Я использовал значение «1», но любое малое значение будет работать.

Причина в том, что для таблиц значение высоты ведет себя как минимальное значение (это в спецификации CSS), что означает, что таблица будет расширять высоты ячеек таблицы по мере необходимости для отображения содержимого, а затем установить высота таблицы должна содержать ячейки таблицы.

См CSS спецификация: http://www.w3.org/TR/CSS21/tables.html#height-layout

Устанавливая значение «1» (1 пиксель на самом деле), таблица пытается установить высоту ячейки таблицы в 1px, и из-за своего содержания, таблицы клеток высоты вычисляются до большего значения, которое, в свою очередь, устанавливает высоту таблицы (вычисляется до значения усадки в соответствие). Если вы установили его на большее значение, скажем, «400», тогда таблица будет занимать высоту не менее 400 пикселей, если вы не добавите достаточно контента, рассчитанного на высоту ячейки более 400 пикселей.

Смотреть другие демо скрипку: http://jsfiddle.net/8azbtoou/

источник

2015-04-21 12:28:50

+0

Я добавил 'style =" height: 100% "' к таблице, но он didn ' t change in IE – Niks

+0

@Niks Я нашел работу для IE (и всех других случаев) и обновил свой ответ. Пожалуйста, просмотрите, когда у вас есть время. –

Смежные вопросы

 Смежные вопросы