Question

我正在使用数据表显示我拥有的数据...我的问题是，如果名称或输入字段太大...就我而言，是使用操作按钮，而不是总是水平放置。 ..他们垂直站立，总是下降一条线。我的目标是使它适合水平放置...我将显示图像中描述的问题。

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<table id="table_id" class="table">
    <thead>
        <tr>
            <th>
                ID_Cliente
            </th>
            <th>
                Nome
            </th>
            <th>
                Morada
            </th>
            <th>
                Telemóvel
            </th>
            <th>
                Email
            </th>
            <th>
                Ações
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ID_Cliente)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Nome)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Morada)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Telemovel)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    <a href='@Url.Action("Edit","Clientes",new { id=item.ID_Cliente }, Request.Url.Scheme)' class="btn btn-sx btn-warning"><span class="glyphicon glyphicon-edit"></span> Editar</a>
                    <a href='@Url.Action("Details","Clientes", new { id=item.ID_Cliente }, Request.Url.Scheme)' class="btn btn-sx btn-primary"><span class="glyphicon glyphicon-info-sign"></span> Detalhes</a>
                    <a href='@Url.Action("Delete","Clientes", new { id=item.ID_Cliente }, Request.Url.Scheme)' class="btn btn-sx btn-danger"><span class="glyphicon glyphicon-trash"></span> Eliminar</a>
                </td>
            </tr>
        }
    </tbody>
</table>
@section scripts {
    <script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#table_id').DataTable();
        });
    </script>
}

CSS

min-height: 1000px;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px

.dataTables_wrapper {
    position: relative;
    clear: both;
    zoom: 1;

Answer 1

如果我理解正确，那么其他列是否断开也没有问题，但是对于最后一个列很重要，因为操作按钮始终保持水平，这对吗？

如果是，也许下面的flex CSS可以为您提供帮助。请检查一下。
如果没有帮助，请考虑我的回答。

（为重现示例，我在HTML部分进行了一些修改）

$(document).ready(function () {
            $('#table_id').DataTable();
        });

.buttons{
  display: flex;
  flex-direction: row;
}

a.btn{
  flex: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="table_id" class="table">
    <thead>
        <tr>
            <th>
                ID_Cliente
            </th>
            <th>
                Nome
            </th>
            <th>
                Morada
            </th>
            <th>
                Telemóvel
            </th>
            <th>
                Email
            </th>
            <th>
                Ações
            </th>
        </tr>
    </thead>
    <tbody>        
            <tr>
                <td>
                    item.ID_Cliente
                </td>
                <td>
                    item.Nome
                </td>
                <td>
                    item.Morada
                </td>
                <td>
                    item.Telemovel 9999999999999
                </td>
                <td>
                    item.Email aaaaaaaaaaada@aaaaaa
                </td>
                <td class="buttons">
                    <a href='@Url.Action("Edit","Clientes",new { id=item.ID_Cliente }, Request.Url.Scheme)' class="btn btn-sx btn-warning"><span class="glyphicon glyphicon-edit"></span> Editar</a>
                    <a href='@Url.Action("Details","Clientes", new { id=item.ID_Cliente }, Request.Url.Scheme)' class="btn btn-sx btn-primary"><span class="glyphicon glyphicon-info-sign"></span> Detalhes</a>
                    <a href='@Url.Action("Delete","Clientes", new { id=item.ID_Cliente }, Request.Url.Scheme)' class="btn btn-sx btn-danger"><span class="glyphicon glyphicon-trash"></span> Eliminar</a>
                </td>
            </tr>
        }
    </tbody>
</table>

Answer 2

您始终可以使用CSS为每个设置固定宽度。您可以使用溢出包装属性（在此处阅读：https://css-tricks.com/almanac/properties/o/overflow-wrap/）来包装文字或设置overflow:hidden和text-overflow:ellipsis

确保最后一个td具有足够的宽度以适合您的按钮。但是话又说回来，如果您正在寻找响应式设计，我必须说，按钮会占用很多空间！

Answer 3

您似乎正在使用Bootstrap，对吗？

为什么不尝试使用小按钮？

代替btn-sx尝试btn-sm。另外，您也可以使用按钮组。

使用示例检查我的笔：https://codepen.io/vicainelli/pen/jpGJbK

HTML将所有内容水平放置

3 个答案: