Редактирование таблицы, основанной на размере веб-страницы

На приведенной ниже фотографии есть div, в котором у меня есть таблица с некоторым содержимым в ней, и по мере того, как я снова масштабирую страницу веб-браузера, таблица выходит из div.Редактирование таблицы, основанной на размере веб-страницы

То, что я хотел бы сделать, это таблица меньше, когда он повторно масштабируется и до сих пор показывают все, что находится внутри него, без использования скроллинга или что-нибудь подобное.

EDIT

#profileTable{ 
 
\t width:auto; 
 
\t text-align:left; 
 
\t color:#000080; 
 
\t padding:30px 60px; 
 
\t border:1px solid #ccc; 
 
\t border-radius:4px; 
 
\t background-color:white; 
 
\t margin: 0 50px 50px; 
 
} 
 

 

 
#content{ 
 
\t margin: 0px 60px 0px; 
 
\t background-color:#E9E9E9; 
 
\t border:solid 1px grey; 
 
\t flex: 1; 
 
\t clear:both; 
 
\t position:relative; 
 
}

<html> 
 
<head> 
 
</head> 
 

 
<body> 
 
    <div id="content" > 
 
     <h2><center>Your profile</center></h2> \t \t \t \t \t 
 
     <table id="profileTable"> 
 
      <tr> \t \t \t \t \t \t \t 
 
      <th>Username:</th> \t \t \t \t 
 
      <td>CONTENT</td> 
 
      </tr> 
 
      <tr> \t \t \t \t \t \t \t 
 
      <th>First name:</th> \t \t \t \t 
 
      <td>CONTENT</td> 
 
      </tr>   
 
     </table> 
 
    </div> 
 
</body> 
 
</html>

источник

2017-02-18 leveeee

добавить HTML, CSS в этом вопросе. –

'table {width: XX%; table-layout: fixed;}' https://www.w3.org/wiki/CSS/Properties/table-layout, если содержимое не нуждается в таблице, затем используйте обычные теги –

есть ли таблица html или нет? к какому тегу относится CSS? center является устаревшим тегом с давних времен, не используйте его :( –

если вы использовали flex, вы можете использовать его слишком для tr, чтобы упаковка без mediaqueries (заметьте это table также может быть список ul или dl)

горизонтальные поля можно поворачивать по ширине с известково() и минимальной ширины, так что они могут визуально разрушаться

Пример

#profileTable { 
 
    text-align: left; 
 
    color: #000080; 
 
    padding: 30px 60px; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    background-color: white; 
 
    width: calc(100% - 100px); 
 
    min-width: 270px;/* remove or tune this to your needs */ 
 
    margin: 0 auto 2em; 
 
    /* word-break:break-all; not really a good idea */ 
 
} 
 

 
#content { 
 
    width: calc(100% - 120px); 
 
    min-width: 360px;/* remove or tune this to your needs */ 
 
    margin: auto; 
 
    background-color: #E9E9E9; 
 
    border: solid 1px grey; 
 
    flex: 1; 
 
    clear: both; 
 
    position: relative; 
 
} 
 

 

 
/* are you already using flex ? */ 
 

 
tr { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
th { 
 
    white-space: nowrap; 
 
    min-width: 5em;/* remove or tune this to your needs */ 
 
} 
 

 
td { 
 
    flex: 1; 
 
} 
 

 
h2 { 
 
    text-align: center; 
 
}

<div id="content"> 
 
    <h2>Your profile</h2> 
 
    <table id="profileTable"> 
 
    <tr> 
 
     <th>Username:</th> 
 
     <td>CONTENT</td> 
 
    </tr> 
 
    <tr> 
 
     <th>First name:</th> 
 
     <td>CONTENT</td> 
 
    </tr> 
 
    </table> 
 
</div>

источник

2017-02-18 23:39:28

О, Боже, ты спаситель! Огромное спасибо !! – leveeee

Посмотрите на table-responsive особенность в Bootstrap.

https://www.w3schools.com/bootstrap/bootstrap_tables.asp

добавить

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 


<table class="table table-responsive">

И затем

источник

2017-02-18 22:58:23

Редактирование таблицы, основанной на размере веб-страницы

ответ

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