HTML Таблица Замораживание Колонка ломает макет

Я пытался получить макет в следующей ссылке, чтобы работать правильно: http://jsfiddle.net/Tc5Xk/HTML Таблица Замораживание Колонка ломает макет

Может кто-то помочь с этим?

div.dashboardBox { 
border: 1px solid #999999; 
width: 45%; 
margin-right: 20px; 
margin-bottom: 20px; 
float: left; 
} 
div.dashboardBoxBody { 
padding: 8px; 
height: 200px; 
overflow: auto; 
margin-left : 5em;  
} 
table.standardTable { 
    position: static; 
    width: 95%;  
} 
.standardTable th { 
font-size: 11px; 
background-color: #888888; 
color: #FFFFFF; 
font-weight: bold; 
text-align: left; 
border: 1px solid #AAAAAA; 
} 
#header_detail { 
    text-align: left; 
    position:absolute;  
    left : 0;  
} 
<div class="dashboardBox"> 
<div class="dashboardBoxBody"> 
    <table style="width:200%" class="standardTable"> 
     <tr> 
      <th id="header_detail">Location</th> 
      <th id="header">Jan-13</th> 
      <th id="header">Feb-13</th> 
      <th id="header">Mar-13</th> 
      <th id="header">Apr-13</th> 
      <th id="header">May-13</th> 
      <th id="header">Jun-13</th> 
      <th id="header">Jul-13</th> 
      <th id="header">Aug-13</th> 
      <th id="header">Sep-13</th> 
      <th id="header">Oct-13</th> 
      <th id="header">Nov-13</th> 
      <th id="header">Dec-13</th> 
     </tr> 
     <tr> 
      <td id="header_detail">Australia</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">California</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Hyderabad</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Los Angeles</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Colorado</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Denver</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Nevada</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Stockholm</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Switzerland</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Brussels</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Paris</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Calicut</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Leh</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Denmark</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Constaninople</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Istanbul</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
     <tr> 
      <td id="header_detail">Las Vegas</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
      <td id="detail">80.5%</td> 
     </tr> 
    </table> 
</div>

источник

2013-08-21 Ravi

Вы имеете в виду что-то вроде этого? http://jsfiddle.net/Jag96/gPRqa/ –

@Joe_G: Левая колонка должна оставаться при горизонтальной прокрутке. – Ravi

Прочтите это, это может помочь: http://stackoverflow.com/questions/11815882/make-first-column-fixed-and-next-column-scrollable-in-html-table, http://stackoverflow.com/ Вопросы/3402295/html-table-with-horizontal-scrolling-first-column-fixed, http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed- frozen-left-column-and-scrollable-body/17557830 # 17557830 –

Проблема в этой строке

#header_detail { 
    text-align: left; 
    position:absolute; // This line 
    left : 0;  
}

Если вынули позицию: абсолютная; вы получите весь город в своем районе.

JsFiddle

источник

2013-08-21 14:19:42 Arturs

Это не затормозит первый столбец – Ravi

Я нашел ситуацию similer. Вот код с e.x. Вы должны взять идею отсюда. http://jsfiddle.net/sgcer/ – Arturs

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

div.dashboardBoxBody { 
padding: 8px; 
height: 200px; 
overflow: auto; 
// margin-left : 5em;  
} 

#header_detail { 
    text-align: left; 
    // position:absolute; 
    left : 0;  
}

Вы должны удалить позицию абсолютного И запас левой части вашего дел до получить тот же результат без переполнения.

источник

2013-08-21 14:21:17 Sugar

Это не затормозит первый столбец – Ravi

О, хорошо. Я не понял этого, довольно странный запрос. :) Просто дайте еще несколько информации о том, что вы ищете в следующий раз. – Sugar

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

HTML Таблица Замораживание Колонка ломает макет

ответ

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