调整页面大小时数据表未正确对齐

Question

我的 MVC 视图中有两个数据表。我可以将它们并排显示。但是当我调整浏览器的大小（还原）时，数据表相互重叠，而不是一个在另一个之下。当浏览器为全尺寸时，如何使数据表彼此相邻，而当我调整浏览器大小时，如何使数据表在另一个下方？我在 MVC razor 视图中使用 Bootstrap 4。

注意：这是我第一次在 stackoverflow 中附加 sn-p。所以如果不正确请多多包涵！

Tables aligned next to each other when on full screen

tables squeezing next to each other when resized

.dataTables_wrapper {
  border: thin solid #808080;
  border-collapse: collapse;
  padding-top: 1rem;
  padding-right: 2rem;
  padding-left: 2rem;
  padding-bottom: 1rem;
}

<div>
  @if (Enumerable.Count(ViewBag.recentprojects) > 0) {



  <div class="col-xs-6">
    <div class="table-responsive">
      <table id="data" class="table table-bordered table-striped table-responsive">
        <thead style="background-color:lightgray">
          <tr>
            <th class="text-center" style="cursor:pointer;background-color:burlywood">
              @Html.DisplayName("My Recent Projects")
            </th>


          </tr>
          <tr>
            <th class="text-center" style="cursor:pointer">
              @Html.DisplayName("Projects")
            </th>


          </tr>
        </thead>
        <tbody id="projects">
          @foreach (var item in ViewBag.recentprojects) {
          <tr>
            <td class="col">
              <a href="#">  @item.ProjectCode</a>: @item.ProjectTitle
            </td>
          </tr>
          }
        </tbody>
      </table>
    </div>
  </div>



  }

  <div class="col-xs-1">
  </div>
  <div class="col-xs-1">
  </div>
  <div class="col-xs-1">
  </div>
  <div class="col-xs-1">
  </div>

  @if ((ViewBag.Leader is true) && (Enumerable.Count(ViewBag.teamprojects) > 0)) {


  <div class="col-xs-6">
    <div class="table-responsive">
      <table id="data1" class="table table-bordered table-striped table-responsive">
        <thead style="background-color:lightgray">
          <tr>
            <th class="text-center" style="cursor:pointer;background-color:burlywood">
              @Html.DisplayName("My Team's Recent Projects")
            </th>
          </tr>

          <tr>
            <th class="text-center" style="cursor:pointer">
              @Html.DisplayName("Projects")
            </th>


          </tr>
        </thead>
        <tbody id="projects">
          @foreach (var item in ViewBag.teamprojects) {
          <tr>
            <td class="col">
              <a href="#"> @item.ProjectCode</a>: @item.ProjectTitle
            </td>

          </tr>
          }
        </tbody>
      </table>
    </div>
  </div>


  }


</div>

Answer 1

您使用过 Bootstrap。尝试在您的元素上实现网格模型。这样响应速度更快，您可以将响应设置为各种屏幕尺寸，例如非常小、小、中和大。 以下是根据屏幕尺寸使用哪些类的参考链接： https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

Answer 2

如果您使用的是 Bootstrap，您还需要在元素和响应式表格上实现网格模型。网格模型提供了各种屏幕尺寸的响应能力，例如非常小、小、中和大。响应式表格使您的表格响应式。所以你的代码看下面的链接--

<div class="panel-body" id="ProjectReq">

    <div class="row">
        <div class="col-xs-6">
            <div class="table-responsive">
                <table id="data" class="table table-bordered table-striped table-responsive">
                    <thead style="background-color:lightgray">
                        <tr>
                            <th class="text-center" style="cursor:pointer;background-color:burlywood">
                                My Recent Projects
                            </th>


                        </tr>
                        <tr>
                            <th class="text-center" style="cursor:pointer">
                                Projects
                            </th>


                        </tr>
                    </thead>
                    <tbody id="projects">
                        <tr>
                            <td class="col">
                                Test Project
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="table-responsive">
                <table id="data1" class="table table-bordered table-striped table-responsive">
                    <thead style="background-color:lightgray">
                        <tr>
                            <th class="text-center" style="cursor:pointer;background-color:burlywood">
                                My Team's Recent Projects
                            </th>
                        </tr>

                        <tr>
                            <th class="text-center" style="cursor:pointer">
                                Projects
                            </th>


                        </tr>
                    </thead>
                    <tbody id="projects">

                        <tr>
                            <td class="col">
                                Test Project 1
                            </td>

                        </tr>

                    </tbody>
                </table>
            </div>
        </div>

    </div>

</div>