Question

我是后端开发人员，有spring boot个项目，其模板引擎为thymeleaf。
我有桌子。最后一列有3个图标-超链接。
我的CSS样式：

td.last {
            width: 1px;
            white-space: nowrap;
        }

我的html：

 <table class="table table-stripped table-bordered">
            <thead>
            <tr>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Column4</th>
                <th class="col-md-1">Column5</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            ...
            <tr>
                <td>9</td>
                <td>Foo</td>
                <td>Bar</td>
                <td></td>
                <td>
                    <a href="link1?id=9" class="create-confirm" data-target="#dlgCreate" role="button" data-title="Foo bar"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span></a>
                    <span>41</span>
                </td>
                <td>
                    <span style="display:inline-block;">
                        <a href="details?id=9"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>&#160;&#160;&#160;&#160;
                        <a href="#" class="delete-confirm" role="button" data-toggle="modal" data-target="#dlgDelete" data-title="Delete FooBar" data-method="delete?id=9"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>&#160;&#160;&#160;&#160;
                        <a style="display: null" href="/link2?param1=FooBar"><span class="glyphicon glyphicon glyphicon-stats" aria-hidden="true"></span></a>
                    </span>
                </td>
            </tr>            
            </tbody>
        </table>

为什么我的上一栏这么宽？

Answer 1

我在您的td上没有看到类名last。我想您可能是指:last-child。将td.last的CSS样式更改为以下样式。

td:last-child{
  width:20px;
  display:inline-block;
  overflow: hidden;
}

请参见下面的代码段

table{
  width: 100%;
}
td:last-child{
  width:20px;
  display:inline-block;
  overflow: hidden;
}

<table>
<tr>
  <td>Name</td>
  <td>Number</td>
  <td>Address</td>
  <td>Action</td>
</tr>

<tr>
  <td>James</td>
  <td>1212121</td>
  <td>USA</td>
  <td>Edit Delete Graph</td>
</tr>
</table>

您也可以here对其进行测试。

为什么表格的列这么宽？

1 个答案: