按列对齐两个引导表？答案

【问题标题】：Align two bootstrap tables by column?按列对齐两个引导表？
【发布时间】：2018-06-20 20:09:16
【问题描述】：

我目前正在使用 bootstrap 和 laravel 表单控件在下面创建这些表结构。我现在遇到的唯一问题是我无法弄清楚如何从两个单独的表中获取删除和编辑按钮以对齐？附件是它现在的样子的照片以及显示表格的代码。

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Dashboard</div>
                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success">
                                {{ session('status') }}
                            </div>
                        @endif
                        <a href="/incidents/create" class="btn btn-primary">Create Incident</a>
                        <a href="/servers/create" class="btn btn-primary">Create Server</a>
                        <h1></h1>
                        <h3>Your Incidents </h3>
                        @if($incidents)
                            <table class='table table-striped'>
                                <tr>
                                    <th>Title</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                                @foreach($incidents as $incident)
                                <tr>
                                    <td><h4>{{$incident->title}} : <strong>{{$incident->status}}</strong></h4></td>
                                    <td><a href="/incidents/edit/{{$incident->id}}" class="btn btn-success">Edit</a></td>
                                    <td>
                                        {!!Form::open(['action' => ['IncidentsController@destroy', $incident->id], 'method' => 'POST', 'class' => 'float-right'])!!}
                                        {{Form::hidden('_method', 'DELETE') }}
                                        {{Form::submit('Delete', ['class' => 'btn btn-danger'])}}
                                        {!!Form::close() !!}
                                    </td>
                                </tr>
                                @endforeach
                            </table>
                        @endif

                        <h3>Your Servers </h3>
                        @if($servers)
                            <table class='table table-striped'>
                                <tr>
                                    <th>Server Names</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                                @foreach($servers as $server)
                                <tr>
                                    <td><h4>{{$server->name}}</h4></td>
                                    <td><a href="/servers/edit/{{$server->id}}" class="btn btn-success">Edit</a></td>
                                    <td>
                                        {!!Form::open(['action' => ['ServerController@destroy', $server->id], 'method' => 'POST', 'class' => 'float-right'])!!}
                                        {{Form::hidden('_method', 'DELETE') }}
                                        {{Form::submit('Delete', ['class' => 'btn btn-danger'])}}
                                        {!!Form::close() !!}
                                    </td>
                                </tr>
                                @endforeach
                            </table>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

在此先感谢您，对于如何为两个不同的表格排列列的任何帮助将不胜感激！

【问题讨论】：

您可以将表格发布为呈现的 HTML 吗？
表格彼此不相关。如果您希望它们匹配，则必须指定两个表格列的宽度。就个人而言，我什至不会费心使用表格，因为使用普通 div 的样式更容易使用 CSS 网格。
你想要这样吗？ codepen.io/creativedev/pen/YvegLj

标签： php css laravel bootstrap-4

【解决方案1】：

我会使用 Bootstrap 4 sizing utils 在表格标题列上设置定义的宽度...

<table class="table table-striped">
       <tbody>
                <tr>
                    <th class="w-50">Server Names</th>
                    <th class="w-25"></th>
                    <th class="w-25"></th>
                </tr>
                <tr>..</tr>
       </tbody>
</table>

https://www.codeply.com/go/hKnKbWhhHh

但是，仍然不能保证 td 列的宽度不会根据其内容而改变。这只是使用单独表格的结果。

【讨论】：

工作就像一个魅力！我知道我只是在看东西，非常感谢！

【解决方案2】：

编辑和删除<td> 的css 类强制最大宽度。那么它就不会像那样自动展开了。

<td class="smallbox">

在 CSS 中你可以说：

.smallbox {
    max-width: 40px; //or whatever
}

【讨论】：

【解决方案3】：

1) 您可以随时为您的编辑和删除按钮添加一个浮动 CSS 属性。

使用浮动：在编辑按钮上使用浮动，在删除按钮上使用浮动。

2) 另一个更简单的选择，将两个按钮放在一起？

【讨论】：