[英]Two tables next to each other
所以我有这个问题。 我需要将第二张桌子放在第一张桌子旁边(右侧)。 或者更喜欢把它像 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%;">🗑 </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>
有很多方法可以做到这一点。 例如,我建议您使用这个。
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%;">🗑 </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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.