Изменение размера фиксированной позиции CSS/HTML при изменении размера браузера

-1

Это моя ситуация: у меня есть таблица с заголовком таблицы position: fixed и несколько строк тела стола с их шириной, установленной на 100%.Изменение размера фиксированной позиции CSS/HTML при изменении размера браузера

Я пытаюсь изменить размер строки заголовка, когда браузер изменяет размер, поэтому его ячейки выстраиваются в ячейки ячеек.

Как я могу это достичь? (попытка сделать элемент position: fixed реагировать на изменение размера браузера динамически)

Вот мой код. Очень простая веб-страница

<html> 
<head> 
<style> 
    body{ 
     width:100%; 
    } 
    thead{ 
     position:fixed;  
     width:100% 
     overflow:visible; 
     align:center; 
    } 
    th{ 
     border:2px solid black; 
      width:20%; 
      text-align:center; 
    } 

    td{ 
     border:2px solid black; 
     width:20%; 
     text-align:center; 
    } 
    table{ 
     width:80%; 
     margin:auto; 
     margin-top:50px; 
    } 
    .empty{ 
     height:30px; 
    } 
    .empty td{ 
     border:none; 
    } 


</style> 

</head> 
<body> 
    <table> 
     <thead> 
      <th> 
       heading1; 
      </th> 
      <th> 
       heading2; 
      </th> 
      <th> 
       heading3; 
      </th> 
      <th> 
       heading4; 
      </th> 
      <th> 
       heading5; 
      </th> 
     <thead> 
     <tbody> 
      <tr class="empty"> 
       <td></td><td></td><td></td><td></td><td></td> 
      </tr> 
      <tr> 
       <td> 
        cell1; 
       </td> 
       <td> 
        cell2; 
       </td> 
       <td> 
        cell3; 
       </td> 
       <td> 
        cell4; 
       </td> 
       <td> 
        cell5; 
       </td> 
      </tr> 
      <tr> 
       <td> 
        cell1; 
       </td> 
       <td> 
        cell2; 
       </td> 
       <td> 
        cell3; 
       </td> 
       <td> 
        cell4; 
       </td> 
       <td> 
        cell5; 
       </td> 
      </tr> 
     <tbody> 
    </table> 
</body> 
</html>

В настоящее время я разрабатываю инструмент веб-сайта с использованием ASP.net. Любое решение в ASP.net будет высоко оценено.

источник

2016-03-10 user6045475

'Align: центр;' осуждается. – Roy

Есть ли причина, по которой фиксируется позиция заголовка таблицы? Вы хотите, чтобы у него был фиксированный заголовок, чтобы вы могли прокручивать остальную часть таблицы? –

Возможно, это поможет: https://jsfiddle.net/dPixie/byB9d/3/light/ –

Элемент таблицы не совсем гибкий, как другой в html. По-видимому, свойство «position: fixed» заставит таблицу игнорировать спецификацию ширины.

Поэтому я немного изменил ваш html и css, чтобы лучше разделить части документа на заголовок и содержимое (раздел).

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

Надеюсь, это поможет, удачи.

body { 
 
     width: 100%; 
 
     margin: 0px; 
 
    } 
 

 
    header { 
 
     width: 100%; 
 
     position: fixed; 
 
     margin-top: -30px; 
 
    } 
 

 
    section { 
 
     width: 100%; 
 
     margin-top: 50px; 
 
    } 
 

 
    table { 
 
     width: 80%; 
 
     margin: 0px auto; 
 
    } 
 

 
    header table th, 
 
    section table td { 
 
     width: 20%; 
 
     text-align: center; 
 
     border: 2px solid black; 
 
    }

<header> 
 
     <table> 
 
      <thead> 
 
       <th>heading1;</th> 
 
       <th>heading2;</th> 
 
       <th>heading3;</th> 
 
       <th>heading4;</th> 
 
       <th>heading5;</th> 
 
      </thead> 
 
     </table> 
 
    </header> 
 

 
    <section> 
 
     <table> 
 
      <tbody> 
 
       <tr> 
 
        <td>cell1;</td> 
 
        <td>cell2;</td> 
 
        <td>cell3;</td> 
 
        <td>cell4;</td> 
 
        <td>cell5;</td> 
 
       </tr> 
 
       <tr> 
 
        <td>cell1;</td> 
 
        <td>cell2;</td> 
 
        <td>cell3;</td> 
 
        <td>cell4;</td> 
 
        <td>cell5;</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </section>

источник

2016-03-10 22:45:18 mformigo

Спасибо. Это похоже на достойный подход к проблеме. – user6045475

Изменение размера фиксированной позиции CSS/HTML при изменении размера браузера

ответ

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