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

Question

我是后端开发人员，有 spring boot 元素和模板引擎 thymeleaf。
我有 table 。最后一列有 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还有。