基於網頁大小的縮放表

在下面的照片中，有一個div，其中有一個包含一些內容的表格，當我重新縮放Web瀏覽器的頁面時，該表格不在div中。基於網頁大小的縮放表

我希望做的是使表更小，當它重新定標，仍然顯示一切這是它的內部，而無需使用滾動條或類似的東西的。

編輯

#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相關的？中心是一個過時的標籤，因爲很久以前，不要使用它:( –

如果使用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功能。

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

基於網頁大小的縮放表

回答

相關問題