两张桌子并排答案

【问题标题】：Two tables next to each other两张桌子并排
【发布时间】：2019-12-03 17:26:53
【问题描述】：

所以我有这个问题。我需要将第二张桌子放在第一张桌子旁边（右）。或者更喜欢把它放在它旁边的 10px 处，但将表格的顶部放在同一个 'y' px 上；另外我不把表格固定好，因为表格在 for() 中，应该有更多的表格，然后只有两个（现在是 1+1，然后是 1+1，然后是 1+1 表格）现在是第二张桌子在第一个之下。我尝试了几件事，但我仍然无法找出正确的答案。我不是css大师，我只是在学习。有人可以帮忙吗？

    <div style="width: 400px">
  @foreach ($reminders as $reminder)

<table style="margin-left: 550px; width: 100%; position: center; margin-top: 50px;">
    <tr style="">
      <th colspan="4">{{$reminder->title}}</th>
    </tr>
    <tr> 
     <th colspan="4" style="height: 150px; text-align: left">{{$reminder->text}}</th></tr>
     <tr> 
      <th>
        <form method="post" action="/donereminder" >
              @csrf

        <input type="hidden" name="rem" value="{{$reminder->id}}" readonly style="width: 0%">
        <button type="submit" style="width: 100%">Done</button>
      </form></a></th>
      <th><button class="button" style="width: 100%">Report</button></th>
      <th><a href="/reminders/{{$reminder->id}}/edit"><button class="button" style="width: 100%">Edit</button></a></th>
      <th>
      <form method="POST" action="/reminders/{{ $reminder->id}}">
    @method('DELETE')
    @csrf

    <div class="field">
    <div class="control">
      <button type="submit" class="button" style="width: 100%;">&#128465; </button>
    </div>
  </div>
  </form>
</th></tr>
    </table>

<table style="margin-left: 550px; width: 100%; position: center; margin-top: 50px">
<form method="POST" action="/reminders/{{$reminder->id}}">

  @method('PATCH')
    @csrf

      <tr>
        <th>
          <div class="form-group">
          <label>Name</label>
          <input type="text" class="form-control" name="title" placeholder="Name of reminder" value="{{$reminder->title}}">
        </div>
      </th>
      </tr>
      <tr>
        <th>
          <div class="form-group">
          <label>Text</label>
          <input type="text" class="form-control" name="text" placeholder="Description of your reminder"  value="{{$reminder->text}}">
        </div>
        </th>
      </tr>
      <tr>
        <th> <div class="form-group">
          <label>Typ</label>
          <select class="form-control" name="typ"  value="{{$reminder->typ}}">
            <option name="typ" value="0">Práce</option>
            <option name="typ" value="1">Narozeniny</option>
            <option name="typ" value="2">Sport</option>
            <option name="typ" value="3">Jiné</option>\
          </select>
        </div></th>
      </tr>
      <tr>
        <th> <div class="form-group">
          <label>Priorita</label>
          <select class="form-control" name="priority"  value="{{$reminder->priority}}">
            <option name="priority" value="{{$reminder->priority}}">{{$reminder->priority}}</option>
            <option name="priority" value="10">10</option>
            <option name="priority" value="9">9</option>
            <option name="priority" value="8">8</option>
            <option name="priority" value="7">7</option>
            <option name="priority" value="6">6</option>
            <option name="priority" value="5">5</option>
            <option name="priority" value="4">4</option>
            <option name="priority" value="3">3</option>
            <option name="priority" value="2">2</option>
            <option name="priority" value="1">1</option>
          </select>
        </div></th>
      </tr>
      <tr>
        <th>
           <div class="form-group">
          <label>Done time</label>
          <input class="datepicker" data-date-format="mm/dd/yyyy"  type="date" placeholder="MM/DD/YYYY" name="donetime"  value="{{$reminder->donetime}}">
        </div>
        </th>
      </tr>
      <tr>
        <th>
          <div class="field">
    <div class="control">
      <button type="submit" class="button is-link"  style="width: 25%;">Upravit reminder</button>
    </div>

  </div>
        </th>
      </tr>
    </table>
    </form>

【问题讨论】：

您的容器<div> 有width:400px，子表有width:100%。每张桌子都得到width:400px，所以这种方式不符合您的目的。

标签： php html css laravel

【解决方案1】：

有很多方法可以做到这一点。我建议你以这个为例。

注意事项：

在子元素中使用display:inline-block。这样一来，所有元素都将位于同一条“水平线”上。
vertical-align 默认设置为基线。所以设置vertical-align: top 可以避免这种情况。
适合的表格数量取决于它们的width 和它们父级的width。
您可以调整每张桌子上的margin-right 之间的距离。

通知，我删除了您的 php 代码并将 background 添加到表格中由于正确显示结果。

    <div>
<table style="display:inline-block;vertical-align:top;margin-right: 10px;background-color:lightgreen;">
    <tr style="">
      <th colspan="4">{{$reminder->title}}</th>
    </tr>
    <tr> 
     <th colspan="4" style="height: 150px; text-align: left">{{$reminder->text}}</th></tr>
     <tr> 
      <th>
        <form method="post" action="/donereminder" >
              @csrf

        <input type="hidden" name="rem" value="{{$reminder->id}}" readonly style="width: 0%">
        <button type="submit" style="width: 100%">Done</button>
      </form></a></th>
      <th><button class="button" style="width: 100%">Report</button></th>
      <th><a href="/reminders/{{$reminder->id}}/edit"><button class="button" style="width: 100%">Edit</button></a></th>
      <th>
      <form method="POST" action="/reminders/{{ $reminder->id}}">
    <div class="field">
    <div class="control">
      <button type="submit" class="button" style="width: 100%;">&#128465; </button>
    </div>
  </div>
  </form>
</th></tr>
    </table>
<table style="display:inline-block;vertical-align:top;background-color:lightgray;">
<form method="POST" action="/reminders/{{$reminder->id}}">
      <tr>
        <th>
          <div class="form-group">
          <label>Name</label>
          <input type="text" class="form-control" name="title" placeholder="Name of reminder" value="{{$reminder->title}}">
        </div>
      </th>
      </tr>
      <tr>
        <th>
          <div class="form-group">
          <label>Text</label>
          <input type="text" class="form-control" name="text" placeholder="Description of your reminder"  value="{{$reminder->text}}">
        </div>
        </th>
      </tr>
      <tr>
        <th> <div class="form-group">
          <label>Typ</label>
          <select class="form-control" name="typ"  value="{{$reminder->typ}}">
            <option name="typ" value="0">Práce</option>
            <option name="typ" value="1">Narozeniny</option>
            <option name="typ" value="2">Sport</option>
            <option name="typ" value="3">Jiné</option>\
          </select>
        </div></th>
      </tr>
      <tr>
        <th> <div class="form-group">
          <label>Priorita</label>
          <select class="form-control" name="priority"  value="{{$reminder->priority}}">
            <option name="priority" value="{{$reminder->priority}}">{{$reminder->priority}}</option>
            <option name="priority" value="10">10</option>
            <option name="priority" value="9">9</option>
            <option name="priority" value="8">8</option>
            <option name="priority" value="7">7</option>
            <option name="priority" value="6">6</option>
            <option name="priority" value="5">5</option>
            <option name="priority" value="4">4</option>
            <option name="priority" value="3">3</option>
            <option name="priority" value="2">2</option>
            <option name="priority" value="1">1</option>
          </select>
        </div></th>
      </tr>
      <tr>
        <th>
           <div class="form-group">
          <label>Done time</label>
          <input class="datepicker" data-date-format="mm/dd/yyyy"  type="date" placeholder="MM/DD/YYYY" name="donetime"  value="{{$reminder->donetime}}">
        </div>
        </th>
      </tr>
      <tr>
        <th>
          <div class="field">
    <div class="control">
      <button type="submit" class="button is-link"  style="width: 25%;">Upravit reminder</button>
    </div>

  </div>
        </th>
      </tr>
    </table>
    </form>

【讨论】：