Question

我想让我的水平表在响应中垂直。我的意思是我的桌子现在是水平的，我想让它垂直。我不在乎它是否与表属性或div属性。感谢。

我不知道还有什么可以写我的问题。

    body {
      background-color: #596770;
        margin-left: 85px; /* Same as the width of the sidenav */
    	margin-top: 102.5px;
        font-size: 18px; /* Increased text to enable scrolling */
    	 padding: 0px 52px 0px 52px;
    	font-size: 35;
    	color:white;
      font-family: montserrat, sans-serif;
    }
	table {
	}
    th {
    	width: 423px;
    	height: 273px;
    }
    .latest img {
    	max-width: 100%;
    
    }
    .About {
    	margin: -45px 0px 0px -52px;
    }
    /* Bottom left text */
    .bottom-left {
        position: absolute;
        bottom: 8px;
        left: 16px;
    }

<div class="main">
  <h2>Latest News</h2>
	 <style>
  table, th {
     border: 1px solid black;
  }
  table, tr {
  border: 0px;
  }
  </style>
  <table class="latest">
    <tr>
	<!--Latest news-->
		<th>
			<a href="">
			<img src="img/NemID_app_to.jpg.png" alt="NemID"><img/>
			</a>
		</th>
      	<td width="61px">
    <!--second news-->  
		<th>Pic2</th>
      	<td width="61px">
    <!--Third news-->  
		<th>Pic3</th>
    </tr>
  </table>

</div>

Answer 1

您可以使用bootstrap并拥有col标签。当屏幕变小时，列将垂直向下移动。请在此处查看示例：https://getbootstrap.com/docs/3.3/examples/grid/

Answer 2

你在找这样的东西吗？

* {
  margin: 0;
}
.table {
  display: table;
  width: 100%
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
  border: 1px solid #ccc;
  padding: 5px
}

@media (max-width: 768px) {
  .tr {
    display: block;
    float: left;
  }
  .td {
    display: block; 
  }
}

<div class="table">
  <div class="tr">
    <div class="td">Test 1</div>
    <div class="td">Test 2</div>
    <div class="td">Test 3</div>
    <div class="td">Test 4</div>
    <div class="td">Test 5</div>
    <div class="td">Test 6</div>
  </div>
  <div class="tr">
    <div class="td">Test 1</div>
    <div class="td">Test 2</div>
    <div class="td">Test 3</div>
    <div class="td">Test 4</div>
    <div class="td">Test 5</div>
    <div class="td">Test 6</div>
  </div>
</div>

Answer 3

当我尝试使用bootstrap时，它会干扰我自己的CSS。有可能，只让Bootstrap CSS在我网站的特殊安装上工作。

Answer 4

查看您的示例，您不需要实际的表格，但需要一些网格来放置新闻项目。我不知道您要支持哪些浏览器，但CSS Grid layout可能是解决方案。然后，您可以根据屏幕宽度定义不同的网格。

Answer 5

这就是你要找的东西：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  </style>
</head>

<body>
  <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
      <![endif]-->

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
      <div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4a</div>
      <div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
      <div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
      <div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4a</div>
      <div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>

    </div>
    <div class="row">
      <div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
      <div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4b</div>
      <div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
      <div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
      <div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4b</div>
      <div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>

    </div>
  </div>
  <header>
  </header>
</body>

</html>

调整窗口大小以查看效果

我想让我的水平表垂直响应

5 个答案: