时间戳

首页 > 解决方案 > 为什么表的列这么宽？

html - 为什么表的列这么宽？

问题描述

我是后端开发人员，并且有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>

为什么我的最后一个专栏这么宽？
在此处输入图像描述

标签： htmlcsshtml-table

解决方案

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

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>

你也可以在这里测试它。

推荐阅读