Question

我试过这个。

<th style="width:500px;overflow:hidden;">

如果我有一个大的描述它是在桌子外面＆amp;我想解决它。

 <div class="Tablecontent">
    <div class="table-responsive">
        <div style="min-height:300px">
            <table class="table table-hover" >
                <thead class="tableHeadDesign">
                    <tr>
                        <th style="width:40px; overflow:hidden;">S.No.</th>
                        <th>Name</th>
                        <th style="max-width:500px;overflow:hidden;">
                            Description
                         </th>
                        <th>Size  </th>
                        <th>Status </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody class="tableBodyDesign">
                    <tr ng-repeat="x in media |filter:searchText">
                        <td>$index </td>
                        <td>{{x.Name}}</td>
                        <td>{{ x.Description }}</td>
                        <td > </td>
                        <td>{{x.Status}}</td>
                        <td>
                            <input type="button" class="btn btn-info btn-lg popbtn ViewBtn" value="View Detail"></a></input>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

这里我想修复描述列。

Answer 1

你在寻找文字溢出吗？

<td style="max-width:500px; display:inline-block; overflow:hidden; text-overflow:clip; white-space:nowrap;">
  {{ x.Description }}
</td>

以下是一个例子：

https://jsfiddle.net/59166290/aan0s31t/15/embedded/result/

Answer 2

您可以使用文字省略号 看这个例子

td{
  max-width:20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
 }
table{
width:100%
}

 <div class="Tablecontent">
    <div class="table-responsive">
        <div style="min-height:300px">
            <table class="table table-hover" >
                <thead class="tableHeadDesign">
                    <tr>
                        <th style="width:40px; overflow:hidden;">S.No.</th>
                        <th>Name</th>
                        <th style="max-width:500px;overflow:hidden;">
                            Description
                         </th>
                        <th>Size  </th>
                        <th>Status </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody class="tableBodyDesign">
                    <tr ng-repeat="x in media |filter:searchText">
                        <td>1 </td>
                        <td>name</td>
                        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                        <td >dsdsdsdsds </td>
                        <td>Status</td>
                        <td>
                            <input type="button" class="btn btn-info btn-lg popbtn ViewBtn" value="View Detail"></a></input>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 3

问题解决...... 实际上我修复了并忘了设置的固定大小：p

HTML - 表头宽度不起作用

3 个答案: