Question

在下面的照片中，有一个div，其中我有一个包含一些内容的表格，当我重新缩放网页浏览器的页面时，该表格不在div中。

我想做的是在重新缩放时使桌子更小，并且仍然显示其中的所有内容，而不使用滚动条或类似的东西。

修改

#profileTable{
	width:auto;
	text-align:left;
	color:#000080;
	padding:30px 60px;
	border:1px solid #ccc;
	border-radius:4px;
	background-color:white;
	margin: 0 50px 50px;
}


#content{
	margin: 0px 60px 0px;
	background-color:#E9E9E9;
	border:solid 1px grey;
	flex: 1;
	clear:both;
	position:relative;
}

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

Answer 1

如果你使用flex，你也可以使用tr来允许在没有媒体查询的情况下进行换行（请注意，此table也可以是列表ul或{{1 }}）

水平边距可以使用calc（）和min-width转换为宽度，因此它们可以在视觉上折叠

例如

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;
}

Answer 2

查看Bootstrap中的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">

然后

重新调整表格，基于网页的大小

2 个答案: