Question

我一周有7张桌子。每个表都定义一周中的一天。我想将其最小化并使用智能手机中的网站，当我将其最小化时，表就会出错：

我该如何解决？

.table{
    	width:14.286%;
    	background-color:white;
    }

<table style="background-color: white;" class="table table-borderedtable-striped">
  <tr>
    <th>Sunday</th>
  </tr>
  <tr ng-repeat="settingtime in settingtimes | orderBy:'time'|filter:by_shiftDay" ng-if="settingtime.shiftDay=='SUNDAY'">
    <td>
      <center>
        <div class="SettingTime">
          {{settingtime.time}}
        </div>
	      <div class="Shift" ng-repeat="sidor in nextsidor | orderBy:'id'" ng-if="sidor.shiftTime==settingtime.id">
	      <i style="color:red;float: right; margin-right: 10px; margin-top:10px;" ui-sref="nextsidoradmin" ng-click="RemoveShift(sidor.id)" class="material-icons">delete</i>
	        {{sidor.workerName}} </br>
	        {{sidor.roleName}} </br>
	      </div>
        </br>
        <button ng-hide="TheWorker2.id==undefined" class="btn btn-primary" ui-sref="nextsidoradmin" ng-click="CreateShift(TheWorker2.id,settingtime.id)">Create Shift</button>
      </center>
    </td>
  </tr>
</table>

Answer 1

使用CSS Grids是实现此UI的最佳方法。

CSS Grid Layout擅长将页面分为主要区域，或根据HTML原语构建的控件各部分之间在大小，位置和层方面定义关系。像表格一样，网格布局使作者可以将元素按列和行对齐。但是，与表格相比，CSS网格可能有更多的布局，也可能更容易。例如，网格容器的子元素可以定位自己，以便它们实际上重叠并分层，类似于CSS定位的元素。

检查Complete guide to Grids的实现细节

简单的CSS网格示例：

* {  box-sizing: border-box; }

img {  max-width: 100%; } 

.card-container {
    display: grid;
    padding: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: 1rem;
}

.card {
    display: grid;
    background-color: red;
    padding:5px;
}

<section class="card-container">
    <div class="card">
        <img src="http://placekitten.com/700/287">
        <div>Lorem Ipsum dolor amet ...</div>
    </div>
    <div class="card">
        <img src="http://placekitten.com/700/287">
        <div>Lorem Ipsum dolor amet ...</div>
    </div>
    <div class="card">
        <img src="http://placekitten.com/700/287">
        <div>Lorem Ipsum dolor amet ...</div>
    </div>
    <div class="card">
        <img src="http://placekitten.com/700/287">
        <div>Lorem Ipsum dolor amet ...</div>
    </div>
    <div class="card">
        <img src="http://placekitten.com/700/287">
        <div>Lorem Ipsum dolor amet ...</div>
    </div>
    <div class="card">
        <img src="http://placekitten.com/700/287">
        <div>Lorem Ipsum dolor amet ...</div>
    </div>
</section>

Answer 2

HTML表格由于其在布局方面的滥用而赢得了良好的声誉。

使用div和css的典型解决方案确实也有自己的潜在陷阱。

这并不意味着您切勿使用表：表数据实际上应该建模为html表。

无论如何，要打造一个好的（响应式）网站，诀窍是双重的：

从数据是什么开始。那就是你在html中编码的方式
首先要在最小的屏幕上显示它，然后向上移动更大的宽度以了解如何使其响应：这就是CSS编码的方式

因此，最后：第一个问题是如何在小屏幕上显示日历。

您可以控制事物的外观。即使您在<p>和<span>中编写代码，您仍然可以像表一样呈现它，这就是CSS可以为您完成的工作。像display: table-cell之类的东西会为您提供帮助。

要使CSS对屏幕的宽度做出反应，可以使用“媒体查询”来帮助您。

FWIW：内联CSS通常不被接受，会对您不利。

但是第一步仍然很简单：您希望它在小屏幕上看起来如何。

基于表的响应式UI

2 个答案: