bootstrap - section 标签下的table宽度超出section 最大宽度
本文介绍了bootstrap - section 标签下的table宽度超出section 最大宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
用bootstrap做的表格,输入太长字符超过section的最大宽度
<section class='grid-table' style="width: 98%; height: auto;">
<table class='table table-condensed head-title'>
<thead>
<tr>
<th style='text-align: center; color:black;'> 事项名称 </th>
<th style='text-align: center;color:black;'> 创建人员 </th>
<th style='text-align: center;color:black;'> 回复 </th>
<th style='text-align: center;color:black;'> 创建时间 </th>
</tr>
</thead>
<tbody v-for="(index,item) in curdiscussList" >
<tr v-if="index%2==0" class="grid-content" style="border-bottom: 1px solid lightgrey; background-color: #F5F5F5;">
<td class="default-font" style="height:3rem; word-break:break-all;">
<a href="#" style="color: black;" >
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</a>
</td>
<td class="default-font" style="text-align: center;">
a
</td>
<td class="default-font" style="text-align: center;">
a
</td>
<td class="default-font" style="text-align: center;">
a
</td>
</tr>
<tr v-else class="grid-content" style="border-bottom: 1px solid lightgrey;">
<td class="default-font" style="height:3rem;">
<a href="#" style="color: black;" >
a
</a>
</td>
<td class="default-font" style="text-align: center;">
a
</td>
<td class="default-font" style="text-align: center;">
a
</td>
<td class="default-font" style="text-align: center;">
a
</td>
</tr>
</tbody>
</table>
</section>
解决方案
添加css属性break-word:all
这篇关于bootstrap - section 标签下的table宽度超出section 最大宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文